动态更改setInterval值作为其运行

我见过很多示例，但没有一个能够完全满足需要。这似乎是最接近的，但使用setTimeout，并不是我需要做的。 Change setInterval value dynamically 动态更改setInterval值作为其运行

我有一个下拉/选择，使用户可以选择更新时间，5秒，10秒和60秒以及一起停止刷新。

<select id="refTime" name="refTime" size="7" onchange="chngAutoRef();"> 
       <option value="60">Time to refresh  </option> 
       <option value="0"> No Auto Refresh  </option> 
       <option value="5"> 5 seconds   </option> 
       <option value="10"> 10 seconds   </option> 
       <option value="20"> 20 seconds   </option> 
       <option value="30"> 30 seconds   </option> 
       <option value="60"> 60 (default)  </option> 

</select>

而我正在使用javascript。

var interval = 60; 

function chngAutoRef() { 
    clearInterval(autoRefId); 
    var autoRefId = null; 

    var interval = $('#refTime').find(":selected").val(); 
    var newButton = "every " + interval; 
    $("#refbutton").attr('value',newButton); // rename the ref button 

    if (typeof interval == 'undefined') {interval = 60;} 

    if (autoRefId !== null) { 
     $("#autoref").html('Start Auto Ref'); // You see this if Refresh is not automatically happening 
      clearInterval(autoRefId); 
       autoRefId = null; 
    } else { 
     interval = interval * 1000; 
     $("#autoref").html('Stop Auto Ref'); // You see this if Refresh is automatically happening 
      autoRefId = setInterval(function() { 
       showActivities(document.getElementById("select1").value);}, interval); 
    } 
} // end of function chngAutoRef() 

chngAutoRef();

当页面启动时，默认值为60秒，如果用户选择5秒，则每5秒刷新一次。但是，如果用户然后将选择更改为10秒（或任何其他），则刷新变得不稳定并且更新5或10或1秒（除了所请求的10之外的任何内容）。

我试过使用setTimeout（）来代替，但我不明白如何使它做我需要的。

来源

2017-10-16 Keith D Kaiser

你没有清除间隔，所以它看起来不稳定，但它真的只是将所有未清除的间隔堆叠在一起。 –

在您的原始代码中，您并未清除您初始化的任何setInterval调用，因为当您将它传递到clearInterval时，变量autoRefId未定义。因此，如果多次点击该按钮，浏览器会将所有间隔函数叠加在一起，使得看起来“不稳定”。

就像@Fenton提到的，这是你应该如何处理这个问题。我还对代码的其他方面做了小的调整。

var interval = 60; 
 

 
var autoRefId = null; 
 
function chngAutoRef() { 
 
    clearInterval(autoRefId); 
 
    var interval = $('#refTime').find(":selected").val(); 
 
    var newButton = "every " + interval; 
 
    $("#refbutton").attr('value',newButton); // rename the ref button 
 

 
    if (typeof interval == 'undefined') {interval = 60;} 
 

 
    //not sure what this was doing..autoRefId would have always been null here. 
 
    //you also don't need to null autoRefId in this function. 
 
    /*if (autoRefId !== null) { 
 
     $("#autoref").html('Start Auto Ref'); // You see this if Refresh is not automatically happening 
 
      clearInterval(autoRefId); 
 
       autoRefId = null; 
 
    } else {*/ 
 
     interval = interval * 1000; 
 
     $("#autoref").html('Stop Auto Ref'); // You see this if Refresh is automatically happening 
 
      autoRefId = setInterval(function() { 
 
       showActivities(document.getElementById("select1").value);}, interval); 
 
    //} 
 
} // end of function chngAutoRef() 
 

 
//chngAutoRef(); 
 
//"*" means we are looking for the click event across the entire doc. 
 
$("*").click(function(){showActivities(document.getElementById("select1").value);});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="refTime" name="refTime" size="7" onchange="chngAutoRef();"> 
 
       <option value="60">Time to refresh  </option> 
 
       <option value="0"> No Auto Refresh  </option> 
 
       <option value="5"> 5 seconds   </option> 
 
       <option value="10"> 10 seconds   </option> 
 
       <option value="20"> 20 seconds   </option> 
 
       <option value="30"> 30 seconds   </option> 
 
       <option value="60"> 60 (default)  </option> 
 

 
</select>

来源

2017-10-16 21:17:28

所有的回复都是正确的。我确实在函数内部保留了var定义（愚蠢的错误）。我纠正了这个问题，并像Lucas建议的那样简化了代码。它现在似乎很好。 –

我该如何获得它以兑现左键点击？左键点击时应该进行刷新。 –

@Keith D Kaiser只是使用jquery'click（）'函数并传递'chngAutoRef'作为处理函数。如果您希望事件侦听器在每次点击时触发，请将事件处理程序绑定到整个文档。以下是一些文档：https://api.jquery.com/click/ –

您的手柄当前被限定在该功能范围内（即每当您打电话时都会创建一个新的autoRefId）。

此举变量声明出来的功能，它能够跨多个调用同一个实例...

// Moved out of the function... 
var autoRefId = null; 

function chngAutoRef() { 
    //...

现在，当您使用清除它autoRefId将参照全局变量的超时（其中有一个），而不是本地的（每个函数调用都有一个）。

请记得从该函数内删除var autoRefId = null;行，以便您没有名称冲突。

来源

2017-10-16 20:47:37 Fenton

任务是启动，暂停或恢复间隔定时器，在可变的时间间隔调用

function() {showActivities(document.getElementById("select1").value);}, interval);

。

首先，对于SO上的帖子，使用虚拟函数来允许读者重现错误。发布的HTML代码也缺少#refbutton和#autoref元素，这使得它很难获得帮助。

我的测试建议#refbutton是一个文本输入元素而不是按钮。您是否打算让用户使用自己的刷新间隔时间来修改输入？如果是这样，必须是设计的一部分。

刷新计时器似乎有多个潜在间隔源：当前正在使用的间隔，所选间隔，暂停刷新前刷新时间为零的间隔以及包含在元素值中的间隔。

该代码不包含用于排序的代码。我管理的金额相当大，但没有用先前的定时器值重新启动定时器，在选择框中停止或在更改#refbutton的值后重新启动。

正如其他人指出的那样，必须使用更改间隔函数外部保存的timerId值停止现有定时器调用。该函数中的var interval也会在外部范围中隐藏interval定义。但是，修复技术编码错误并不能解决设计缺乏问题。我建议对代码体系结构进行重新评估，并可能重构功能交互，以最大限度地满足设计目标。通过选择或输入一个定时器值为零来保持定时器是可能的，，但它使算法复杂化了很多。

来源

2017-10-17 02:50:29 traktor53

动态更改setInterval值作为其运行

回答

相关问题