有没有办法在 JavaScript 中定期调用函数？

Posted 2023-02-19

【中文标题】有没有办法在 JavaScript 中定期调用函数？

【英文标题】：Is there any way to call a function periodically in JavaScript?

【发布时间】：2010-11-16 12:06:09

【问题描述】：

【参考方案1】：

setInterval()方法，重复调用一个函数或者执行一段代码sn-p，每次调用之间有固定的时间延迟。它返回一个唯一标识间隔的间隔 ID，因此您可以稍后通过调用 clearInterval() 将其删除。

var intervalId = setInterval(function() 
  alert("Interval reached every 5s")
, 5000);

// You can clear a periodic function by uncommenting:
// clearInterval(intervalId);

查看更多@setInterval() @ MDN Web Docs

【讨论】：

我投了赞成票，然后决定撤销我的赞成票（但不是反对票），因为您使用了 setInterval 的字符串参数。为了效率、安全性以及它们的闭包特性，函数几乎总是应该用于支持字符串参数。

没关系，我不介意。 setInterval() 是问题的正确答案，无论参数如何。这只是一个示例，根据定义，这两种方法都是正确的。

我同意 Jason S 的观点；它真的应该是一个功能。在您的示例中，唯一的问题是性能损失可以忽略不计，但这是一个坏习惯。

我同意你们两个，使用函数更好。我从来没有说过不是。无论哪种方式都是正确的，但是为了 cmets，我将编辑答案以包含一个函数。

值得注意的是setInterval在第一次调用给定函数之前会等待间隔时间。

【参考方案2】：

老问题但是.. 我还需要一个定期任务运行器并写了TaskTimer。当您需要以不同的时间间隔运行多个任务时，这也很有用。

// Timer with 1000ms (1 second) base interval resolution.
const timer = new TaskTimer(1000);

// Add task(s) based on tick intervals.
timer.add(
    id: 'job1',       // unique id of the task
    tickInterval: 5,    // run every 5 ticks (5 x interval = 5000 ms)
    totalRuns: 10,      // run 10 times only. (set to 0 for unlimited times)
    callback(task) 
        // code to be executed on each run
        console.log(task.id + ' task has run ' + task.currentRuns + ' times.');
    
);

// Start the timer
timer.start();

TaskTimer 在浏览器和 Node 中都可以使用。有关所有功能，请参阅 documentation。

【参考方案3】：

请注意，setInterval() 通常不是定期执行的最佳解决方案 - 它真的取决于您实际定期调用的 javascript。

例如。如果您使用 setInterval() 的周期为 1000 毫秒，并且在周期函数中进行 ajax 调用，有时需要 2 秒才能返回，那么您将在第一个响应返回之前进行另一个 ajax 调用。这通常是不可取的。

许多库都有周期性的方法来防止天真地使用 setInterval 的陷阱，例如 Nelson 给出的 Prototype 示例。

要使用其中包含 jQuery ajax 调用的函数实现更稳健的周期性执行，请考虑以下内容：

function myPeriodicMethod() 
  $.ajax(
    url: ..., 
    success: function(data) 
      ...
    ,
    complete: function() 
      // schedule the next request *only* when the current one is complete:
      setTimeout(myPeriodicMethod, 1000);
    
  );


// schedule the first invocation:
setTimeout(myPeriodicMethod, 1000);

另一种方法是使用 setTimeout，但在变量中跟踪经过的时间，然后动态设置每次调用的超时延迟，以尽可能接近所需的时间间隔执行函数，但速度永远不会超过您获得响应的速度。

【讨论】：

setTimeout(myPeriodicMethod, 1000);被调用 2 次。是必需的吗？我认为设置超时应该只在完整的函数中调用

是的，第二个 setTimeout() 不是必需的，您可以简单地调用 myPeriodicMethod()，它会立即执行第一个 ajax 调用...但是如果您想 安排它 i> 从第一次通话开始有延迟，你可以像我写的那样写。

【参考方案4】：

原生方式确实是setInterval()/clearInterval()，但如果你已经在使用Prototype库，你可以利用PeriodicExecutor：

new PeriodicalUpdator(myEvent, seconds);

这可以防止重叠调用。来自http://www.prototypejs.org/api/periodicalExecuter：

“它可以保护你免受回调函数的多个并行执行，如果它需要比给定的时间更长的时间来执行（它维护一个内部的“运行”标志，它可以屏蔽回调函数中的异常）。这尤其是如果您使用一个以给定的时间间隔与用户交互（例如使用提示或确认呼叫），这将很有用：这将避免多个消息框都等待被操作。"

【参考方案5】：

每个人都已经有了 setTimeout/setInterval 解决方案。我认为重要的是要注意您可以将函数传递给 setInterval，而不仅仅是字符串。实际上，将实际函数而不是将被“评估”给这些函数的字符串可能更“安全”。

// example 1
function test() 
  alert('called');

var interval = setInterval(test, 10000);

或者：

// example 2
var counter = 0;
var interval = setInterval(function()  alert("#"+counter++); , 5000);

【讨论】：

+1 如果您是 Crockford school of JavaScript 的学生，请避免使用各种邪恶形式的 eval。

@Patrick - 我不认为“不要在名称中使用 $（美元符号）或 \（反斜杠）”的建议与 jQuery 很多：)

【参考方案6】：

是的 - 查看setInterval and setTimeout 在特定时间执行代码。 setInterval 将用于定期执行代码。

查看demo and answer here 了解使用情况

【参考方案7】：

function test() 
 alert('called!');

var id = setInterval('test();', 10000); //call test every 10 seconds.
function stop()  // call this to stop your interval.
   clearInterval(id);

【参考方案8】：

由于您希望函数定期执行，请使用setInterval

【参考方案9】：

你会想看看 setInterval() 和 setTimeout()。

这是decent tutorial article。