摘要：函数节流函数防抖总结其实函数节流和防抖都是闭包的运用，保存外部函数中的变量值，只不过节流是在多次操作中取第一次，而防抖是取多次操作中的最后一次，具体原因是因为是中的宏任务，在主线程代码执行完毕之后才会执行其中的回调方法。
函数节流
function throttle(fn, delay = 2000) {
let Timer = null
return function () {
let Now = +new Date()
if ( Now - Timer >= delay || !Timer) {
fn.call(this, ...arguments)
Timer = Now
}
}
}
函数防抖
function debounce(fn, delay = 300) {
let Timer
return function() {
let _arg = arguments
let _this = this
if (Timer) {
clearTimeout(Timer)
}
Timer = setTimeout(() => {
fn.apply(this, _arg)
}, delay);
}
}
总结:
其实函数节流和防抖都是闭包的运用，保存外部函数中的变量值，只不过节流是在多次操作中取第一次，而防抖是取多次操作中的最后一次，具体原因是因为setTimeout是eventloop中的宏任务，在主线程代码执行完毕之后才会执行其中的回调方法。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/102392.html
摘要：若时间差大于间隔时间，则立刻执行一次函数。不同点函数防抖，在一段连续操作结束后，处理回调，利用和实现。函数防抖关注一定时间连续触发的事件只在最后执行一次，而函数节流侧重于一段时间内只执行一次。 原博客地址，欢迎star 函数防抖和节流 函数防抖和函数节流：优化高频率执行js代码的一种手段，js中的一些事件如浏览器的resize、scroll，鼠标的mousemove、mouseover...
摘要：概念函数防抖和函数节流，两者都是优化高频率执行代码的一种手段。防抖任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行。节流指定时间间隔内只会执行一次任务一定时间内方法只跑一次。 概念 函数防抖和函数节流，两者都是优化高频率执行js代码的一种手段。 防抖：任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行。 节流：指定时间间隔内只会执行一次任...
摘要：定时器实现当触发事件的时候，我们设置一个定时器，再触发事件的时候，如果定时器存在，就不执行直到秒后，定时器执行执行函数，清空定时器，这样就可以设置下个定时器。当最后一次停止触发后，由于定时器的延迟，可能还会执行一次函数。 一、什么是防抖和节流 Ps: 比如搜索框，用户在输入的时候使用change事件去调用搜索，如果用户每一次输入都去搜索的话，那得消耗多大的服务器资源，即使你的服务器资源...
阅读 2301·2023-04-25 21:41
阅读 1466·2021-09-22 15:17
阅读 1077·2021-09-22 10:02
阅读 2085·2021-09-10 11:21
阅读 690·2021-09-03 10:28
阅读 2417·2019-08-30 15:53
阅读 826·2019-08-30 15:44
阅读 819·2019-08-30 13:46
