Question

我每隔几秒就使用setInterval运行一个函数（执行AJAX的东西）。但是我还有另一个功能也叫它。

setInterval(myFunc(), 5000);
function buttonClick() {
  // do some stuff
  myFunc();
}

大部分时间它都有效，但是有时这个函数会同时被调用两次，导致两次收到完全相同的结果，这是我不想要的。

我想我必须使用clearTimeout：

var interval = setInterval(myFunc(), 5000);
function buttonClick() {
  clearTImeout(interval);
  // do some stuff
  myFunc();
  interval = setInterval(myFunc(), 5000);
}

但是这会导致函数停止。由于从其他函数调用它，一些代码永远不会被执行。我该如何防止这种情况？

Answer 1

然而，有时这个函数会被同时调用两次，导致两次收到完全相同的结果，这是我不想要的。

浏览器上的JavaScript是单线程的（除非使用新的web workers内容，但无论如何这都不适用）。你的函数在运行时永远不会被调用。（但更多信息如下。）

在您的各种代码引号中，您正在调用 myFunc，您只想引用它。 E.g：

var interval = setInterval(myFunc(), 5000);

应该是

var interval = setInterval(myFunc, 5000);
//                               ^--- No parentheses

如果您纠正错误，则取消超时的代码将起作用：

var interval = setInterval(myFunc, 5000);
function buttonClick() {
  clearTImeout(interval);
  // do some stuff
  myFunc();
  interval = setInterval(myFunc, 5000);
}

但是没有理由这样做，myFunc无论如何都无法被调用。

如果myFunc 触发异步完成的内容（例如ajax调用），上面的将不会帮助（原因很简单） myFunc将启动该流程然后返回;该流程将单独完成）。在这种情况下，最好的办法是让myFunc安排下一次呼叫：

function myFunc() {
    // Do my work...

    // Schedule my next run
    setTimeout(myFunc, 5000);
}

...根本不使用setInterval。

Answer 2

除非myFunc返回一个函数，否则我会执行此操作（也使用clearInterval代替clearTimeout）：

var interval = setInterval(myFunc, 5000);
function buttonClick() {
  clearInterval(interval);
  // do some stuff
  myFunc();
  interval = setInterval(myFunc, 5000);
}

setInterval期望在其参数中有一个函数。您可以使用myFunc()来调用函数。所以myFunc返回的内容被传递给setInterval，这可能不是你想要的。

Answer 3

我意识到已经有了几个解决方案，但我想我会展示一个比“做这个”更多的解决方案。我倾向于通过实例学习，并认为我会扩展相同的实践。话虽如此，demo is here但我也会尝试解释。

// Here we assign the function to a variable that we can use as an argument to the
// setInterval method.
var work = function(){
    // performing a very simple action for the sake of demo
    $('#log').append('Executed.<br />');
};

// this is a variable that is essentially used to track if the interval is or is
// not already running. Before we start it, we check it. Before we end it, we also
// check it. Let's start off with it started though
var worker = setInterval(work, 5000);

// bind to the start button
$('#start').click(function(){
    // Test: is the worker already running?
    if (worker)
        // Yes it is, don't try to call it again
        $('#warn').text('Timer already running!');
    else{
        // no it's not, let's start it up using that function variable we declared
        // earlier
        worker = setInterval(work,3000);
        $('#warn').text('Started!');
    }
});

// bind to the stop button
$('#stop').click(function(){
    // test: is the worker running?
    if (!worker)
        // no, so we can't stop it
        $('#warn').text('Timer not running!');
    else{
        // yes it's working. Let's stop it and clear the variable.
        clearInterval(worker);
        worker = null;
        $('#warn').text('Stopped.');
    }
});

暂停setInterval

3 个答案: