JS 防抖与节流的原理分析和代码手写

目录

前言

作用 

防抖

使用场景

分析原理

手写代码

节流

使用场景

原理分析

手写代码

小补充

---

前言

前一段时间，我学习了 JS 的防抖与节流，自认为掌握住了它们，当我在做面试题的时候，遇到了一道：手写节流，我当时就觉得这题稳了！然鹅，当我结束题目，再去翻看节流的代码时，发现，我磕磕绊绊写出来的，并不是正确答案！！因此，我决定再重新梳理一遍防抖和节流，并记录下来。

作用 

对用户短时间内的操作进行限制，避免页面重复渲染， 降低服务器的压力，减少资源消耗，优化性能。

防抖

使用场景

例如：当用户在文本框输入一段内容时，每输入一个字符，就会触发一次事件，但这个频繁触发事件是不必要的，没用的，只需要在最后把所有的内容输入完成，再去触发相应事件即可。这个地方就用到了防抖的原理，js 会将前面所有的点击操作销毁，只会执行最后的一次操作，当最后一次执行完成，过了设置的时间间隔，这时，再次触发时，就会正常执行相应的操作。

分析原理

当用户触发一个事件，会立马产生一个计时变量 timer ，每次触发该事件之前，会先判断是否超过设置的时间间隔，如果没有超过，也就是短时间内，重复操作同一 dom