关于javascript：setTimeout和clearTimeout的可变范围


Variable Scope with setTimeout & clearTimeout

在研究变量范围时，我似乎无法弄清一件事。 例如两个元素。 如果第一个悬停在其上方，则其同级出现。 如果将鼠标移出初始元素，则兄弟姐妹将通过存储在变量表达式中的setTimeout消失。 如果碰巧将鼠标悬停在同级上，则会调用clearTimeout函数，并将其设置为在回调中淡出。

关于范围，我不了解的是在clearTimeout函数中如何准确识别timer变量。 我尝试console.log(timer)，但只得到了数值。 尽管我希望了解以下内容，但为什么以及如何？ 换句话说，第二个悬停方法调用如何知道定时器变量超出范围后的内容？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var timer;

$('p:eq(1)').hide();

$('p').first().hover(function() {
  $(this).next().fadeIn();
}, function() {
  timer = setTimeout(function() {
    $('p:eq(1)').fadeOut();
  }, 1000);
  // console.log(timer);
});

$('p:eq(1)').hover(function() {
  clearTimeout(timer);
}, function() {
  $('p:eq(1)').fadeOut(1000);
});
相关讨论

函数clearTimeout不仅采用setTimeout，而且还采用其ID。 这是我在MDN上找到的内容：
enter image description here

因此，当您设置超时时，它将返回一个特定的ID供参考，因此clearTimeout将起作用。 同样，按照MDN：
enter image description here

由于您在全局范围内设置了timer，因此每个函数都可以访问它。

感谢您提出一个教我一些问题的问题！ (我不知道setTimeout返回了什么)

相关讨论

很简单。计时器本身通过您在与兄弟事件绑定相同的作用域中定义的'timer'变量存储在内存中。 因此，可以通过在任何同级或子级作用域中直接使用" timer"调用timer变量来访问它。 您是否在函数中声明了" var timer"部分，如下所示：

1
2
3
4
5
 function() {
  var timer;
  timer = setTimeout(function() {
    $('p:eq(1)').fadeOut();
  }, 1000);

结果将是clearTimeout(timer)不在范围内，并导致未知的成员错误。