大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
小编给大家分享一下javascript函数节流和防抖的应用场景有哪些,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!
专注于为中小企业提供成都做网站、网站制作服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业黄龙免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了近1000家企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。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事件是, 只执行一次。
电话号码输入的验证, 只需停止输入后进行一次。
coding
function 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);
看完了这篇文章,相信你对“javascript函数节流和防抖的应用场景有哪些”有了一定的了解,如果想了解更多相关知识,欢迎关注创新互联网站制作公司行业资讯频道,感谢各位的阅读!