js的定时器 setTimeout()和setInterval()

JavaScript 定时器，有时也称为“计时器”，用来在经过指定的时间后执行某些任务，类似于我们生活中的闹钟。

在 JavaScript 中，我们可以利用定时器来延迟执行某些代码，或者以固定的时间间隔重复执行某些代码。例如，您可以使用定时器定时更新页面中的广告或者显示一个实时的时钟等。

JavaScript 中提供了两种方式来设置定时器，分别是 setTimeout() 和 setInterval()，它们之间的区别如下：

具体介绍如下：

setTimeout()

常用语法：

1.  
   // 单次定时器，只能执行一次
2.  
   setTimeout(function () { },time);
3.  
   // - 参数1：function 必需。函数，过time时间之后执行的业务逻辑，可写成箭头函数()=>{}的形式
4.  
   // - 参数2：time 可选。执行或调用 function 需要等待的时间，以毫秒ms计。默认为 0
5.  
    
6.  
   // 清除setTimeout单次定时器
7.  
   clearTimeout(定时器名称);

注意事项：time 取默认值 0 时意味着“马上”执行，或者尽快执行。不管是哪种情况，实际的延迟时间可能会比期待的 (time 毫秒数) 值长。

实际延时比设定值更久的原因：最小延迟时间

在浏览器中，setTimeout（）/setInterval（）的每调用一次定时器的最小间隔是 4ms，这通常是由于函数嵌套导致（嵌套层级达到一定深度5层），或者是由于已经执行的 setInterval 的回调函数阻塞导致的，不同浏览器中出现这种最小延迟的情况有所不同

setInterval()

常用语法：

1.  
   // 循环定时器，不停歇，每过一段时间time，执行一次。
2.  
   setInterval(function () { },time);
3.  
   // 参数同setTimeout
4.  
    
5.  
   // 清除setInterval循环定时器
6.  
   clearInterval(定时器名称);

setTimeout() 和 setInterval（）中的调用函数我们也称为回调函数 callback 普通函数是按照代码顺序直接调用。 而这个函数，需要等待时间，时间到了才去调用这个函数，因此称为回调函数。

延迟限制：定时器是可以嵌套的；这意味着，setInterval（）的回调中可以嵌入对 setInterval（） 的调用以创建另一个定时器，即使第一个定时器还在运行。为了减轻这对性能产生的潜在影响，一旦定时器嵌套超过 5 层深度，浏览器将自动强制设置定时器的最小时间间隔为 4 毫秒。如果尝试将深层嵌套中调用 setInterval（）的延迟设定为小于 4 毫秒的值，其将被固定为 4 毫秒。

这篇好文章是转载于：学新通技术网