手写防抖和节流函数

防抖和节流防抖：定义：当用户操作页面时，只有距离最近一次触发事件的时间超过设置的时间间隔时，才会执行回调函数。（事件在设定的时间间隔内重复触发多次，回调函数只会在设定的时间间隔后执行一次）应用场景：1、输入内容时。简化代码：//debouncefunctiondebounce(fn,delay=500){lettimer=null//timer是闭包中的返回函数(){if(timer)clearTimeout(timer)timer=setTimeout(()=>{fn.apply(this,arguments)timer=null},delay)}}Throttling:定义：当用户操作页面时，在事件持续触发的时间段内，每隔设定的时间间隔执行一次回调函数。应用场景：1.滚动条被拉动时。2.滑动验证码滑块时。3.拖动元素时。短版代码：//throttlefunctionthrottle(fn,delay=100){lettimer=nullreturnfunction(){if(timer)returntimer=setTimeout(()=>{fn.apply(this,arguments)timer=null},delay)}}2023年2月3日添加：今天有个需求，让我感悟了一些，不知道对不对，先记录下来，以后再修改。有一个需求是div中信息的更新通过更新周期函数触发其他函数调用。默认情况下，当信息更新时，它会自动滚动到底部。单击信息或滑动鼠标滚轮取消滚动到底部。有一个按钮可以点击恢复自动滚动到底部，也可以将鼠标滑到底部恢复。所以上面关于滚动条的问题，一个是使用节流，一个是使用anti-shaker防抖进行动作结束后的判断，所以进度条scrolls防抖可以使用到达底部时触发操作，使用节流时触发操作不一定在底部。throttling是用来在一个action的时间内周期性的触发一个操作，第一个action会被触发，所以如果用来向上或者向下滚动进度条，第一个notification滚动到底部，message可能是使用防抖时触发进度条无法滚动，因为已经再次滚动到底部。所以滚动条是使用节流还是防抖要看具体情况。