为什么 JavaScript 定时器叠加后会加速？

定时器叠加导致速度加快的解析

在 javascript 代码中，我们常常使用定时器来执行周期性任务。而最近，有人遇到了一个奇怪的问题，即定时器叠加后速度会加快。

问题的代码如下：

var timer = setInterval(function(){
    //...
}, 10)

$('li').hover(function() {
    clearInterval(timer);
},
function() {
    //我知道这边是因为又重新创建了一个timer的定时器，才造成叠加效果
    //为什么clearInterval(timer)清除不了，问了别人是因为清除的是第一个timer
    //为什么？重新定义的定时器也叫timer了，timer不是被重新赋值了，为什么清除不了
    //还有一个问题为什么定时器叠加了，速度会加快，可以说得详细点？

    var timer = setInterval(function(){
        //...
    }, 10)
});

问题解析

立即学习“Java免费学习笔记（深入）”；

• clearinterval(timer) 清除的是第一个定时器

  

  Tago AI

  AI生成带货视频，专为电商卖货而生

  下载

  var timer = setinterval(...) 函数会创建一个新的定时器并返回其 id。当使用 clearinterval(timer) 时，它将清除此 id 对应的定时器。而在代码中，每当鼠标悬停在 li 元素上时，会创建了一个新的定时器并覆盖了先前的 var timer。因此，clearinterval(timer) 实际上清除的是第一个定时器，而第二个定时器仍然在运行。

• 重新定义的定时器导致 var timer 成为局部变量

  在 javascript 中，var 声明的变量具有函数作用域。当在函数内使用 var 声明变量时，它实际上创建了一个局部变量，而不是覆盖全局变量。因此，当在鼠标悬停事件处理程序中重新定义 timer 时，它成为一个局部变量，与全局变量 timer 不同。

• 定时器叠加导致速度加快

  当多个定时器同时执行同一任务时，可能会出现速度加快的现象。这是因为每个定时器都是独立运行的，它们都在争夺 cpu 时间。因此，同时运行的定时器越多，cpu 可用于执行其他任务的时间就越少，从而导致整体速度下降。