JavaScript防抖与节流,深入浅出,一本正经讲透彻
目录
一、函数防抖(debounce)
1. 什么是防抖?
二.、函数节流
2.1 定时器实现
2.2 时间戳实现
2.3 时间戳+定时器
最后
一、函数防抖(debounce)
1. 什么是防抖?
函数防抖
:在频繁触发某一个事件时,一段时间内不再触发该事件后才会去调用对应的回调函数,在设定间隔时间内如果下一次事件被触发, 那么就重新开始定时器,直到事件触发结束。
规定时间内没有继续触发事件的前提下,再去调用事件处理函数;
具体如下面的例子所示:
/*定义防抖函数* func:传入一个函数,事件不再持续触发时会调用该函数* delay:定义持续多久后执行传入的回调函数* */function debounce(func,delay) {let timer = null // 用于保存定时器return function (...args) {// 如果定时器存在,清除定时器,随后重新设置timerif(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); // 如果这样写的话,每当页面滚动就会调用事件处理函数
-
总结一下思路
:1.定义一个节流函数
2.函数内部使用一个变量保存定时器
3.返回一个函数,函数内部定义:如果定时器已经存在就清除定时器,重新设置定时器
4.定义一个变量来接收debounce返回的函数
5.在事件的回调函数中直接调用上一步的变量接收的方法
二.、函数节流
函数节流
:在事件持续触发的前提下,保证一定时间段内只调用一次事件处理函数,就是函数节流;
函数节流实现的方式
:定时器、时间戳、定时器+时间戳;
2.1 定时器实现
思路
:
1.定义节流函数throttle
2.定义timer保存定时器
3.返回一个函数。函数内部定义:如果定时器不存在,设置定时器,间隔某一时间后将timer设置为null,如果在这之前事件再次触发,则定时器中的回调无效
/** 定义定时器节流函数* func:传入事件处理函数* delay:在delay指定的时间内定时器回调无效* */function throttle(func,delay) {let timer = nullconst context = thisreturn function(...args){// 如果定时器不存在if(!timer){timer = setTimeout(()=>{func.apply(context,args) // 考虑返回的函数调用的环境,因此这里不直接使用thistimer = null // delay之后清除定时器},delay)}}}function test() {console.log('啊啊啊!')}const temp = throttle(test,1000)document.querySelector('button').addEventListener('click',()=>{temp()})
2.2 时间戳实现
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));
2.3 时间戳+定时器
// 节流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));
最后
想跟博主交朋友的可以查找,公_号❤:前端老实人,跟博主一起探讨学习哦❤
如果对您有帮助,希望能给个👍评论收藏三连!
博主为人老实,无偿解答问题哦❤