setTimeout(〒︿〒) 请原谅我一直以来对你的忽视

简介: 纸上得来终觉浅,绝知此事要躬行。哪怕是平时一个不起眼的小知识,我们也需要以认真的态度去学习,否则,说不定什么时候就会踩到坑,伤害到彼此!

纸上得来终觉浅,绝知此事要躬行。哪怕是平时一个不起眼的小知识,我们也需要以认真的态度去学习,否则,说不定什么时候就会踩到坑,伤害到彼此!


5.png


前戏


不管文章水不水,前戏都必须做足,否则写不下去啊,O(∩_∩)O哈哈~


之前发布了《前端 JavaScript 之『防抖』的简单代码实现》这篇文章之后,有一位朋友发了这么一条评论:


4.png


我在写代码时有一个习惯:就是对已经销毁的变量随手赋一个 null,比如这样的:


6.png


听说这样销毁的更彻底哦o( ̄▽ ̄)d。


针对上面这位朋友的建议,我也不确定是不是正确,好像平时也确实很少见到在 cleatTimeout 之后再赋值为 null 的操作。


对于不能确定的问题,我只坚信一个原则——实践是检验真理的唯一标准,既然有了困惑,那就动手验证好了。没错,我就是这么直接,请不要惊讶!︿( ̄︶ ̄)︿


意外


本来以为是很简单的一次验证而已,洒洒水啦!可是,谁想却发生了意外,不信你看:


3.png


What?! setTimeout 的返回值是一个数字!!就问你:惊不惊喜意不意外?


好歹做了几年开发了,我居然不知道这个事,简直弱爆了!不过话说回来,谁平时会闲着没事去打印它的返回值啊,我们用的是它的功能好不好。


为什么会出现这么个结果呢?我们来看看 MDN 上怎么说:


返回值timeoutID是一个正整数,表示定时器的编号。这个值可以传递给clearTimeout()来取消该定时器。


看来这是常识性问题,只怪我平时没注意啊,看来平时要加强基础知识的储备了!


2.png


至于为什么 timer 的值一直在增加,MDN 上是这样解释的:


在同一个对象上(一个window或者worker),setTimeout()或者setInterval()在后续的调用不会重用同一个定时器编号。但是不同的对象使用独立的编号池。


timer 每次执行的本质是生成了一个新的延时器,属于不同对象,所以编号发生了改变。


本来还想要再看看 setInterval 的,但是看到这个解释,我就打消了验证的念头,那必然又是一次”惊喜“。


验证


经过了前面这个意外,让我知道了自己的无知。但意外也是最好的鞭策,即使惭愧,但是开头所说的验证还是得往下走。


现在我们知道了一个真理:setTimeout 的返回值是一个代表延时器对象唯一身份标识的数字,那么在 clearTimeout() 之后,它的值到底会变成什么呢?请看大屏幕:


1.png


我们看到,在调用 clearTimeout() 方法销毁延时器后,timer 的值并未被清空。


总结


经过上面的验证,我们可以得出以下结论:


  1. 延时器方法 setTimeout() 的返回值是一个代表定时器唯一身份标识的编号;
  2. 这个编号是定时器一生成就带的,定时器执行过程中,编号不会发生变化;
  3. 计时器 setInterval 和 延时器 setTimeout 共用一个编号池,且所有编号都不会重复;
  4. 在调用了定时器销毁方法(clearTimeout 和 clearInterval)后,定时器编号不会被清空。


以上总结适用于所有定时器(计时器和延时器)。


嗯,看来我随手赋一个 null 的做法还是比较合理的,毕竟是起到了那么一丝丝的作用的( ̄︶ ̄)↗。


随手赋 null 是一个好习惯!( ̄▽ ̄)~*

随手赋 null 是一个好习惯!( ̄▽ ̄)~*

随手赋 null 是一个好习惯!( ̄▽ ̄)~*


其实,今天这个验证也证实了另一个道理:我们平时最忽视的,往往是我们自以为最熟悉的,伤害了对方而不自知!


你品,你细细品!


~ 本文完,感谢阅读!

学习有趣的知识,结识有趣的朋友,塑造有趣的灵魂!


知识与技能并重,内力和外功兼修,理论和实践两手都要抓、两手都要硬!


0.png




相关文章
|
1月前
|
前端开发 JavaScript UED
debounce(防抖)和 throttle(节流)是两种非常实用的技术,它们可以帮助我们有效地控制函数的执行频率,提高应用的性能和用户体验。
【9月更文挑战第1天】在前端开发中,频繁的用户操作可能导致性能问题。为此,debounce(防抖)和 throttle(节流)技术应运而生,有效控制函数执行频率,提升应用性能和用户体验。debounce 原理是在一定时间内仅执行最后一次事件,减少不必要的计算;throttle 则确保函数按固定频率执行,保证基本响应速度。二者广泛应用于搜索实时反馈、滚动事件处理等场景,可通过原生 JavaScript 或第三方库如 Lodash 实现。正确使用可显著改善应用性能。
38 8
|
2月前
|
前端开发 JavaScript 开发者
从Callback的暗黑时代到Async/Await的光明未来:一场JavaScript异步编程的革命,你准备好了吗?
【8月更文挑战第27天】异步编程是现代JavaScript开发的关键技能,它使代码能在等待耗时操作时继续执行,提升程序响应性和效率。从早期的Callback发展到Async/Await,异步编程经历了显著进化,提供了更简洁直观的编程体验。Callback虽允许在异步操作完成时执行特定代码,但易导致“回调地狱”。为解决此问题,Promise和Async/Await应运而生,它们避免了嵌套回调,并提供了更直观的错误处理方式,极大提高了代码的可读性和可维护性。掌握这些技巧对于构建高效、可维护的应用至关重要。
28 3
|
3月前
|
JavaScript
JS【详解】setTimeout 延时(含清除 setTimeout,计时开始时间,0 秒延时解析,多 setTimeout 执行顺序,setTimeout 应用场景,网红面试题)
JS【详解】setTimeout 延时(含清除 setTimeout,计时开始时间,0 秒延时解析,多 setTimeout 执行顺序,setTimeout 应用场景,网红面试题)
469 0
|
5月前
|
JavaScript 前端开发 UED
JavaScript 持续变化:setTimeout 与 setInterval 的巧妙应用
JavaScript 持续变化:setTimeout 与 setInterval 的巧妙应用
52 1
|
5月前
|
JavaScript 前端开发 数据处理
JavaScript 游戏规则:setTimeout和setInterval的对决
JavaScript 游戏规则:setTimeout和setInterval的对决
40 1
|
5月前
|
前端开发 JavaScript UED
【专栏】前端开发中,为解决用户操作引发的性能问题,常使用debounce(防抖)和throttle(节流)技术
【4月更文挑战第29天】前端开发中,为解决用户操作引发的性能问题,常使用debounce(防抖)和throttle(节流)技术。Debounce确保在一段时间内只执行最后一次事件触发的操作,减少不必要的执行,但有滞后性,适合搜索框实时搜索。Throttle则保证一定时间间隔内函数执行一次,保持固定频率,适用于滚动事件处理和窗口大小调整。两者可借助JavaScript或第三方库实现,需根据场景和需求选择并调整。正确使用能提升应用性能和用户体验。
38 1
|
5月前
|
前端开发 JavaScript
跟着Promise的节奏,让你的代码脱颖而出
跟着Promise的节奏,让你的代码脱颖而出
|
前端开发 JavaScript
解密异步操作终极利器:使用async/await获取Promise结果!
在开发中,我们经常需要处理异步操作,而Promise成为了处理异步的常用方式。然而,使用`.then`方法时,我们有时无法直接通过赋值方式或返回值获取所需的结果。本文将揭示一个解决方案,通过使用async/await语法,可以在`.then`方法中正确地返回我们需要的值
113 0
|
前端开发 JavaScript
【JavaScript】Promise(二) —— 几个关键问题
【JavaScript】Promise(二) —— 几个关键问题
相比 setInterval(),更推荐 setTimeout()
相比 setInterval(),更推荐 setTimeout()
80 0