javascript - 在运行时动态更改 setInterval 值

Question

我看过很多例子，但没有一个能完全满足我的需要。这似乎是最接近的，但使用 setTimeout 并不是我需要做的。 Change setInterval value dynamically

我有一个下拉菜单/选择，让用户可以选择刷新时间，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() 代替，但我不明白如何让它做我需要的。

Answer 1

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

就像@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>