js 函数节流和防抖

js 函数节流和防抖throttle 节流事件触发到结束后只执行一次。应用场景触发mousemove事件的时候， 如鼠标移动。触发keyup事件的情况， 如搜索。触发scroll事件的时候， 譬如鼠标向下滚动停止时触发加载数据。coding方法1 防抖// function resizehandler(fn, delay){// clearTimeout(fn.timer);// fn.timer = setTimeout(() => {// fn();// }, delay);// }// window.onresize = () => resizehandler(fn, 1000);方法2 闭包 防抖function resizehandler(fn, delay){ let timer = null; return function() { const context = this; const args=arguments; clearTimeout(timer); timer = setTimeout(() => { fn.apply(context,args); }, delay); } } window.onresize = resizehandler(fn, 1000);debounce 防抖事件出发后一定的事件内执行一次。应用场景window 变化触发resize事件是， 只执行一次。电话号码输入的验证， 只需停止输入后进行一次。codingfunction resizehandler(fn, delay, duration) { let timer = null; let beginTime = +new Date(); return function() { const context = this; const args = arguments; const currentTime = +new Date(); timer && clearTimeout(timer); if ((currentTime - beginTime) >= duration) { fn.call(context, args); beginTime = currentTime; } else { timer = setTimeout(() => { fn.call(context, args) }, delay); } } } window.onresize = resizehandler(fn, 1000, 1000);DemoCodePen-demo参考文章 http://www.alloyteam.com/2012…