在javascript中 setInterval()、clearInterval()、clearTimeout()等等常用的函数的含义是啥？

Posted 2023-05-04

最好把那些常用的函数都列举出来，讲解详细一点，最好有例子，一句一句讲解，细一点.....

setInterval()是一种定时器，它按照指定的设置时间（以毫秒计）来调用函数的方法。clearInterval()是结束定时器的循环调用函数。除非调用clearInterval()方法，否则无限循环执行回调函数。例如：

var i = 0;//定义一个变量i
var t = setInterval(function()
    if(i === 60)
        clearInterval(t);//假如i是60，则清除此定时器，结束循环回调
    else
        i++;
        console.log(i);
    
,1000);//设置每1000毫秒（一秒钟）回调一次函数

setTimeout()同理也是一种定时器，对应的结束定时的方法是clearTimeout()。与setInterval()不同的是，此定时器只执行一次，例如：

var t = setTimeout(function()
    console.log("OK");
,1000);//一秒后在控制台输出字符串"OK"

参考技术A setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
clearInterval() 定义和用法
clearInterval() 方法可取消由 setInterval() 设置的 timeout。
clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。

setTimeout() 定义和用法
setTimeout()
方法用于在指定的毫秒数后调用函数或计算表达式。

提示：setTimeout() 只执行 code 一次。如果要多次调用，请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。
clearTimeout() 定义和用法
clearTimeout() 方法可取消由 setTimeout() 方法设置的 timeout。

参考资料：http://www.w3school.com.cn/htmldom/dom_obj_window.asp

在 JavaScript 中停止 setInterval 调用

【中文标题】在 JavaScript 中停止 setInterval 调用

【英文标题】：Stop setInterval call in JavaScript

【发布时间】：2010-09-11 15:59:06

【问题描述】：

我使用setInterval(fname, 10000); 在 JavaScript 中每 10 秒调用一次函数。是否可以在某些事件上停止调用它？

我希望用户能够停止重复刷新数据。

【参考方案1】：

setInterval()返回一个区间ID，你可以把它传递给clearInterval()：

var refreshIntervalId = setInterval(fname, 10000);

/* later */
clearInterval(refreshIntervalId);

请参阅 setInterval() 和 clearInterval() 的文档。

【讨论】：

在使用 'clearInterval()' 停止后如何重新启动它？如果我尝试重新启动它，我会运行 2 倍的 setInterval。

我也是每次我想使用 SetInterval(MyFunction , 4000);它变得越来越快，每次快 2 倍 :( 我如何重新启动 setinterval？？

SetInterval() 不会改变您通过它的速度。如果每次调用 SetInterval() 时它正在做的事情都加快了速度，那么您有多个同时运行的计时器，应该提出一个新问题。

确保你真的停止了它。由于范围可变，您可能没有正确的 ID 来调用 clearInterval。我使用了window.refreshIntervalId 而不是局部变量，效果很好！

我已经开始将 setInterval 句柄附加到它的关联元素（如果相关）：$('foo').data('interval', setInterval(fn, 100)); 然后用clearInterval($('foo').data('interval')); 清除它我确信有一个非jQuery 方法可以做到这一点，也是。

【参考方案2】：

如果你将setInterval的返回值设置为一个变量，你可以使用clearInterval来停止它。

var myTimer = setInterval(...);
clearInterval(myTimer);

【讨论】：

我看不出这和约翰的回答有什么区别

迟到了，但是，我认为它被复制了一些单词差异，没有比约翰的回答更清楚

【参考方案3】：

你可以设置一个新变量，让它每次运行时递增 ++（加一），然后我使用条件语句来结束它：

var intervalId = null;
var varCounter = 0;
var varName = function()
     if(varCounter <= 10) 
          varCounter++;
          /* your code goes here */
      else 
          clearInterval(intervalId);
     
;

$(document).ready(function()
     intervalId = setInterval(varName, 10000);
);

希望对你有帮助，而且是对的。

【讨论】：

我很惊讶地发现这行得通clearInterval(varName);。我希望 clearInterval 在传递函数名称时不起作用，我认为它需要间隔 ID。我想这只有在你有一个命名函数时才有效，因为你不能将匿名函数作为变量传递给它自己。

其实我觉得行不通。由于计数器的限制，代码停止执行，但间隔不断触发 varName()。尝试在 clearInterval() 之后（在 else 子句中）记录任何内容，您将看到它被永远写入。

$(document).ready(function() ); 是 jQuery，这就是它不起作用的原因。至少应该提到这一点。

@OMGrant，除了一个不起作用的例子，你还有一个名为varName的变量，它存储了一个未命名的函数——wha??恕我直言，您应该更改或删除此答案。

MSN 非常清楚，clearInterval 需要一个 id 而不是函数：developer.mozilla.org/en-US/docs/Web/API/WindowTimers/…。由于此答案不正确且具有误导性，我将投票否决。

【参考方案4】：

上面的答案已经说明了setInterval是如何返回一个句柄的，以及这个句柄是如何用来取消Interval定时器的。

一些架构方面的考虑：

请不要使用“无范围”变量。最安全的方法是使用 DOM 对象的属性。最简单的地方是“文件”。如果刷新是通过启动/停止按钮启动的，您可以使用该按钮本身：

<a onclick="start(this);">Start</a>

<script>
function start(d)
    if (d.interval)
        clearInterval(d.interval);
        d.innerHTML='Start';
     else 
        d.interval=setInterval(function()
          //refresh here
        ,10000);
        d.innerHTML='Stop';
    

</script>

由于该函数是在按钮单击处理程序中定义的，因此您不必再次定义它。如果再次单击该按钮，则可以恢复计时器。

【讨论】：

将它放在document 上比放在window 上更好吗？

更正。我的意思是document.body。在我的代码示例中，我有效地使用了按钮本身。按钮没有 ID，但“this”指针绑定到函数中的“d”参数。使用“窗口”作为范围是有风险的，因为函数也在那里。例如，“function test()”可以通过 window.test 访问，这与根本不使用范围相同，因为它是一种速记。希望这会有所帮助。

不要丢失“无作用域”变量->不要使用“无作用域”我会编辑它，但更改少于 6 个字母，并且错误令人困惑。跨度>

你不需要 DOM。只需我们一个 IIFE 即可避免全球范围污染。

我必须在 innerhtml='start' 之后添加 'd.interval=undefined' 才能使其再次工作。因为这样只会工作一次。

【参考方案5】：

已经回答...但是如果您需要一个特色的、可重复使用的计时器，它还支持不同时间间隔的多个任务，您可以使用我的TaskTimer（适用于 Node 和浏览器）。

// 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. (omit for unlimited times)
    callback(task) 
        // code to be executed on each run
        console.log(task.name + ' task has run ' + task.currentRuns + ' times.');
        // stop the timer anytime you like
        if (someCondition()) timer.stop();
        // or simply remove this task if you have others
        if (someCondition()) timer.remove(task.id);
    
);

// Start the timer
timer.start();

在您的情况下，当用户点击干扰数据刷新时；如果他们需要重新启用，您也可以致电 timer.pause() 然后 timer.resume()。

见more here。

【参考方案6】：

clearInterval() 方法可用于清除使用 setInterval() 方法设置的计时器。

setInterval 总是返回一个 ID 值。可以在 clearInterval() 中传递此值以停止计时器。 这是一个从 30 开始到 0 时停止的计时器示例。

  let time = 30;
  const timeValue = setInterval((interval) => 
  time = this.time - 1;
  if (time <= 0) 
    clearInterval(timeValue);
  
, 1000);

【参考方案7】：

@cnu，

您可以停止间隔，当尝试在查看您的控制台浏览器（F12）之前运行代码时...尝试注释 clearInterval(trigger) 再次查看控制台，而不是美化器？ :P

检查示例来源：

var trigger = setInterval(function()  
  if (document.getElementById('sandroalvares') != null) 
    document.write('<div id="sandroalvares" style="background: yellow; width:200px;">SandroAlvares</div>');
    clearInterval(trigger);
    console.log('Success');
   else 
    console.log('Trigger!!');
  
, 1000);

<div id="sandroalvares" style="background: gold; width:200px;">Author</div>

【参考方案8】：

这就是我使用 clearInterval() 方法在 10 秒后停止计时器的方式。

function startCountDown() 
  var countdownNumberEl = document.getElementById('countdown-number');
  var countdown = 10;
  const interval = setInterval(() => 
    countdown = --countdown <= 0 ? 10 : countdown;
    countdownNumberEl.textContent = countdown;
    if (countdown == 1) 
      clearInterval(interval);
    
  , 1000)

<head>
  <body>
    <button id="countdown-number" onclick="startCountDown();">Show Time </button>
  </body>
</head>

【参考方案9】：

声明变量以分配从 setInterval(...) 返回的值 并将分配的变量传递给 clearInterval();

例如

var timer, intervalInSec = 2;

timer = setInterval(func, intervalInSec*1000, 30 ); // third parameter is argument to called function 'func'

function func(param)
   console.log(param);

// 任何你可以访问上面声明的 timer 的地方调用 clearInterval

$('.htmlelement').click( function()  // any event you want

       clearInterval(timer);// Stops or does the work
);

【参考方案10】：

在 nodeJS 中，您可以在 setInterval 函数中使用“this”特殊关键字。

您可以使用这个this关键字来清除Interval，这里是一个例子：

setInterval(
    function clear() 
            clearInterval(this) 
       return clear;
    ()
, 1000)

当您在函数中打印 this 特殊关键字的值时，您会输出一个 Timeout 对象 Timeout ...

【参考方案11】：

clearInterval()

请注意，您可以使用此功能启动和暂停您的代码。这个名字有点欺骗性，因为它说的是 CLEAR，但它并没有清除任何东西。它实际上暂停了。

使用此代码进行测试：

HTML：

<div id='count'>100</div>
<button id='start' onclick='start()'>Start</button>
<button id='stop' onclick='stop()'>Stop</button>

JavaScript：

let count;

function start()
 count = setInterval(timer,100)  /// HERE WE RUN setInterval()


function timer()
  document.getElementById('count').innerText--;



function stop()
  clearInterval(count)   /// here we PAUSE  setInterval()  with clearInterval() code

【参考方案12】：

使用 setTimeOut 在一段时间后停止间隔。

var interVal = setInterval(function()console.log("Running")  , 1000);
 setTimeout(function (argument) 
    clearInterval(interVal);
 ,10000);

【参考方案13】：

很多人都给出了很好的答案，clearInterval 是正确的解决方案。

但我认为我们可以做得更多，让我们的编辑器使用 javascript 计时器强制执行最佳实践。

忘记清除setTimeout或setInterval设置的定时器总是很容易，这可能会导致难以发现的错误。

所以我为上面的问题创建了一个 eslint 插件。

https://github.com/littlee/eslint-plugin-clean-timer

【参考方案14】：

我想下面的代码会有所帮助：

var refreshIntervalId = setInterval(fname, 10000);

clearInterval(refreshIntervalId);

您的代码 100% 正确... 那么... 有什么问题？或者它是一个教程......

【参考方案15】：

试试

let refresch = ()=>  document.body.style= 'background: #'
  +Math.random().toString(16).slice(-6);

let intId = setInterval(refresch, 1000);

let stop = ()=> clearInterval(intId);

body transition: 1s

<button onclick="stop()">Stop</button>

【参考方案16】：

为什么不使用更简单的方法呢？添加课程！

只需添加一个告诉间隔不要做任何事情的类。例如：悬停时。

var i = 0;
this.setInterval(function() 
  if(!$('#counter').hasClass('pauseInterval'))  //only run if it hasn't got this class 'pauseInterval'
    console.log('Counting...');
    $('#counter').html(i++); //just for explaining and showing
   else 
    console.log('Stopped counting');
  
, 500);

/* In this example, I'm adding a class on mouseover and remove it again on mouseleave. You can of course do pretty much whatever you like */
$('#counter').hover(function()  //mouse enter
    $(this).addClass('pauseInterval');
  ,function()  //mouse leave
    $(this).removeClass('pauseInterval');
  
);

/* Other example */
$('#pauseInterval').click(function() 
  $('#counter').toggleClass('pauseInterval');
);

body 
  background-color: #eee;
  font-family: Calibri, Arial, sans-serif;

#counter 
  width: 50%;
  background: #ddd;
  border: 2px solid #009afd;
  border-radius: 5px;
  padding: 5px;
  text-align: center;
  transition: .3s;
  margin: 0 auto;

#counter.pauseInterval 
  border-color: red;  

<!-- you'll need jQuery for this. If you really want a vanilla version, ask -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<p id="counter">&nbsp;</p>
<button id="pauseInterval">Pause</button></p>

多年来，我一直在寻找这种快速简便的方法，因此我发布了几个版本，以向尽可能多的人介绍它。

【讨论】：

对我来说似乎并不简单......我也认为删除间隔而不是保持对无操作函数的调用更干净。

我不同意。 this.setInterval(function() if(!$('#counter').hasClass('pauseInterval')) //do something , 500); 是您所拥有的所有代码。此外，检查是您要做的第一件事，因此在悬停时它非常轻巧。这就是它的用途：暂时暂停功能。如果你想无限期地终止它：当然你删除间隔。

这相当于轮询，通常不鼓励使用。它会将 CPU 从低功耗状态唤醒，只是为了进行（可能）无用的检查。在本例中，它还将反馈从立即延迟到 0 到 500 毫秒。

我完全不同意你的观点，即使我在 2 年前编写了代码。无论如何，柜台必须在那里，因为 OP 要求它。当然，如果您在按下按钮后使用它来停止计数器，例如，这将是一个次优解决方案，但只是在悬停时暂停，这是可用的最简单的解决方案之一。