Javascript函数的防抖和节流
Posted 覃
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Javascript函数的防抖和节流相关的知识,希望对你有一定的参考价值。
防抖
防抖防抖 防止手抖
就是在某段时间内触发多次事件,只执行最后一次。
例如百度搜索联想,只会联想最后输入的字符
function resizeEvent (content) { console.log(`window`+content) } let event = debounce(resizeEvent, 500) function debounce(func, delay) { let timeOut = null return (args) => { if (timeOut !== null) { // 清除上一次定时器,重新计时 clearTimeout(timeOut) } timeOut = setTimeout(() => { func(args) }, delay) } } // 调整浏览器窗口大小时,触发事件 addEventListener(\'resize\', ()=>{event(1)})
应用:
1.search联想,在用户不断输入值的时候,节约请求资源,确保联想正确
2.window resize事件,防抖让其只触发一次
节流
在一段时间内触发多次事件,函数在每一个间隔时间后执行一次。
例如 fps游戏中 一直按着鼠标, 冲锋枪子弹按照一定速度连发
function resizeEvent (content) { console.log(`window`+content) } let event = throttle(resizeEvent, 500) function throttle(func, delay) { let last = null let deferTimer = null return (args) => { let now = new Date().getTime() if (last && now < last + delay) { // 未到间隔时间,清除定时器 clearTimeout(deferTimer) deferTimer = setTimeout(()=> { // 重新新建定时器,等待间隔时间以后置位last,执行功能函数 last = now func(args) }, delay) } else { // 第一次或者已超过间隔时间 last = now func(args) } } } // 调整浏览器窗口大小时,触发事件 addEventListener(\'resize\', ()=>{event(1)})
应用:
1.鼠标不断点击触发某功能,mousedown(单位时间内只触发一次)
2.鼠标不断移动触发某功能,mousemove(单位时间内只触发一次)
总结
防抖和节流
相同点都是为了解决短时间内大量触发某函数而导致的性能问题。
不同点是根据不同的业务需求,实现的原理不同。
有问题可以一起探讨,欢迎关注公众号 小覃笔记
以上是关于Javascript函数的防抖和节流的主要内容,如果未能解决你的问题,请参考以下文章