脚本宝典收集整理的这篇文章主要介绍了什么是JavaScript的防抖与节流,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
函数防抖: 在频繁触发某一个事件时,一段时间内不再触发该事件后才会去调用对应的回调函数,在设定间隔时间内如果下一次事件被触发, 那么就重新开始定时器,直到事件触发结束。
规定时间内没有继续触发事件的前提下,再去调用事件处理函数;
具体如下面的例子所示:
/*定义防抖函数 * func:传入一个函数,事件不再持续触发时会调用该函数 * delay:定义持续多久后执行传入的回调函数 * */ function debounce(func,delay) { let timer = null // 用于保存定时器 return function (...args) { // 如果定时器存在,清除定时器,随后重新设置timer if(timer !== null) clearTimeout(timer) timer = setTimeout(func, delay) // 超过delay为接收到事件会调用这里的func 必要的额时候可以修改func的this指向 由于timer对外部存在引用,因此不会被销毁 } } /*事件处理函数*/ function testDeBounce(){ console.LOG('你看我执行了几次??') } // 接收debounce返回的函数 const temp = debounce(testDeBounce(),1000) /*绑定事件,测试防抖函数*/ window.addEventListener('scroll',()=>{ temp() }); // 这样写最少调用一次事件处理函数,最多也不会多余下面的写法执行的次数 window.addEventListener('scroll', testDeBounce); // 如果这样写的话,每当页面滚动就会调用事件处理函数
总结一下思路:
debounce
返回的函数函数节流: 在事件持续触发的前提下,保证一定时间段内只调用一次事件处理函数,就是函数节流;
函数节流实现的方式: 定时器、时间戳、定时器+时间戳;
思路:
throTTLe
timer
保存定时器null
,如果在这之前事件再次触发,则定时器中的回调无效<button>这是一个孤独的按钮</button>
/* * 定义定时器节流函数 * func:传入事件处理函数 * delay:在delay指定的时间内定时器回调无效 * */ function throttle(func,delay) { let timer = null const context = this return function(...args){ // 如果定时器不存在 if(!timer){ timer = setTimeout(()=>{ func.apply(context,args) // 考虑返回的函数调用的环境,因此这里不直接使用this timer = null // delay之后清除定时器 },delay) } } } function test() { console.log('啊啊啊!') } const temp = throttle(test,1000) document.querySelector('button').addEventListener('click',()=>{ temp() })
VAR throttle = function(func, delay) { var prev = Date.now(); return function() { var context = this; var args = arguments; var now = Date.now(); if (now - PRev >= delay) { func.apply(context, args); prev = Date.now(); } } } function handle() { console.log(Math.random()); } window.addEventListener('scroll', throttle(handle, 1000));
// 节流throttle代码(时间戳+定时器): var throttle = function(func, delay) { var timer = null; var startTime = Date.now(); return function() { var curTime = Date.now(); var remaining = delay - (curTime - startTime); var context = this; var args = arguments; clearTimeout(timer); if (remaining <= 0) { func.apply(context, args); startTime = Date.now(); } else { timer = setTimeout(func, remaining); } } } function handle() { console.log(Math.random()); } window.addEventListener('scroll', throttle(handle, 1000));
到此这篇关于什么是JavaScript的防抖与节流的文章就介绍到这了,更多相关JavaScript的防抖与节流内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本宝典!
以上是脚本宝典为你收集整理的什么是JavaScript的防抖与节流全部内容,希望文章能够帮你解决什么是JavaScript的防抖与节流所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。