为什么需要防抖和节流?
在前端会出现一种情况,就是某些事件的触发会比较频繁,比如:onMouseMove,onScroll,onClick,resize等等。这些事件的触发是比较频繁的,那么其对应的事件处理函数就会频繁执行,如果事件处理函数的逻辑简单还好说,要是事件处理函数的逻辑比较复杂,或者说事件处理函数附带了很多前端效果的话,不仅仅会影响性能,还会造成很多意向不到的问题。
那么,为了解决这些问题,也从用户体验的角度出发,有防抖和节流两种方案。
一、防抖
1.定义
所谓防抖就是,在固定的时间内,事件处理函数仅执行一次。举个例子,我们通过代码控制,让某个时间处理函数在每5s内仅触发一次,那么即使用户的操作再频繁,那么两次触发的时间最小是 5s,这在一定程度上就可以控制用户的触发频率。
防抖本质上就是清除尚未执行的定时器
2.举例说明(onmousemove事件:在定时器里鼠标滑过div就打印‘document’)
<div id=</