2018-12-14
JavaScript
0

目录

反抖:
节流:
总之,防抖和节流都可以优化事件处理函数的执行效率和性能,但它们的应用场景和具体实现方式略有不同。需要根据具体情况来选择使用哪种方法。

反抖:

指连续触发事件但只在最后一次触发后才执行一次处理函数的方法。在设定的时间间隔内,如果触发了多次事件,则只有最后一次事件触发后的一段时间内没有再触发事件,才会执行处理函数。例如,在用户输入搜索关键字时,我们可能需要使用防抖方法,以避免每次输入都触发请求,导致服务器压力过大。

js
var debounce = function(func,delay){ let timer; return function(...args){ if(timer){ clearTimeout(timer) } timer=setTimeout(function(){ func.apply(this,args) },delay) } }

节流:

指在一定时间间隔内,无论触发了多少次事件,都只执行一次处理函数的方法。例如,当我们监听窗口的滚动事件时,可以使用节流方法,以避免滚动过程中触发过多的计算和渲染操作,导致页面卡顿。

js
var throttle = function (func, wait) { let now, timer; let previous = 0; return function (...args) { now = +(new Date()); if (now - previous >= wait) { timer&&clearTimeout(timer); func.apply(this, args); previous = now; } else{ timer&&clearTimeout(timer); console.log(wait - now + previous) timer = setTimeout(() => { func.apply(this, args); previous = now; }, wait - now + previous) } } }

总之,防抖和节流都可以优化事件处理函数的执行效率和性能,但它们的应用场景和具体实现方式略有不同。需要根据具体情况来选择使用哪种方法。

本文作者:BARM

本文链接:

版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!