動態更改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值作爲其運行

回答

相關問題