自写函数的防抖和节流

函数的防抖和节流是个啥，在知乎上看到一篇非常形象的文章，这里挂上链接
https://zhuanlan.zhihu.com/p/72923073（好！！！）

防抖

为了说明问题，假设一个场景：鼠标滑过一个div，触发onmousemove事件，它内部的文字会显示当前鼠标的坐标。每当我们的鼠标移动，都会触发事件，展示新的坐标。

抖的意思其实就是‘执行’，而我们为了防止函数过于频繁的执行，给与它一定的冷静期，当我们停止移动一段时间后再去执行这个函数，这个时候我们就需要用到函数的防抖了。ok，现在我们明确两个特点
1.持续触发不执行
2.不触发的一段时间之后再去执行
其实第二点我们很容易做到，用setTimeout就可以实现延迟执行。

这里注意一点，需要用apply来使指针指向调用者(在这里也就是我们的box)，并传参。
ok现在回来去思考第一点，如何当它持续触发的时候不执行，现在我们是有setTimeout给予了它冷静期，所以是setTimeout控制了函数的执行。那么我们的思路就非常明确了，在它持续触发的时间内，清除掉定时器就ok了。

这里要多说一句，我们实际去调用debounce的时候，执行的是匿名函数内的内容。你可以把debounce当做一个对象，而我们声明的timeout就是它的一个属性 ，而我们使用的也只是它的内部的函数。
这样，一个防抖就做好了。

节流

 节流的意思其实和防抖比较的类似，一听名字就知道也是为了防止函数毫无节制的频繁的执行，但是他要保证的是函数在一段时间内只能执行一次。
 ok，确定两个特征：
 	1.持续触发不会执行多次
 	2.到一定时间再去执行

简单来说，我们希望函数在一定时间内只能执行一次，所以我们需要有一个开关去控制。
1.首先在我们创造的时候，默认规定run = true，表示开关开着，只有等于true的时候（也就意味着，这一段时间，还未执行过），如果还未执行过，那么我们就认为其可执行，否则，也就是当run为false的时候(意味着在dealy的时间内，已经有过一次函数的执行了)，
2.所以，在匿名函数中，我们首先就判断run是不是false，如果是false，就直接return掉。当为true的时候，我们就直接给其赋值为false，表示这一次的执行。接下来就是setTimeout了，我们延迟delay的时间去执行函数，以及重新给run赋值为true,注意，是延迟过后才去执行，所以在delay的时间内，run仍为false，接下来的任何触发都是直接被return掉的。
3.这也就防止了函数的频繁执行，也保证了一段时间内只执行一次。

总结

	防抖和节流的代码，还是有一点点的小困难去理解，讲的不好，请多海涵！！！

标签：触发,防抖,run,自写,执行,我们,节流,函数
来源： https://blog.csdn.net/weixin_43795084/article/details/110288098