您的位置:首页 > 其它

函数防抖与节流你知多少

2020-01-31 20:36 344 查看

它们都是为了解决事件的频繁触发而出现的

不同之处:

防抖: 当事件频繁触发时不执行事件处理函数,

    只有空闲下来的时候才会执行事件处理函数,

    (比如一个搜素场景, 当用户正在输入的时候不触发搜索

     只有当用户停止输入时才发起搜索请求)。

节流: 当事件频繁触发时规定一定时间内只触发一次事件处理函数,

   比如 规定3秒内 , 无论事件触发了多少次, 事件处理函数只执行一次

    (比如一个抢购场景,先到先得, 普通用户疯狂点击抢购按钮抢购,

     外挂用户使用脚本一秒钟抢1000次, 这时候加上节流,规定一秒钟只能

      抢一次,这样就保证了公平性)

 先看一下一个滚动不加防抖和节流的效果:

const scrollSection = document.getElementsByClassName('scroll-section')[0];

scrollSection.addEventListener('scroll',callback, false);
function callback() {
console.log('滚动')
}

 

 

使用节流:

const scrollSection = document.getElementsByClassName('scroll-section')[0];

scrollSection.addEventListener('scroll',callback, false);

let canPlay = true;

function callback() {
if (!canPlay) {
return
}
canPlay = false;
setTimeout(() => {
console.log('节流');
canPlay = true;
}, 2000)
}

通过一个开关来控制是否打印, 2秒内无论滚动多少次,

由于开关是false,所以都不会触发事件处理函数,只有2秒后,

开关变成true才触发,我们把它封装成一个函数throttle

const scrollSection = document.getElementsByClassName('scroll-section')[0];
const params = ['节流'];
scrollSection.addEventListener('scroll',throttle(callback,2000,...params), false);

function callback(str) {
console.log(str);
}
// 节流函数
function throttle(cb,wait) {
let canPlay = true;
// 截取传递过来的参数
const args = [].slice.call(arguments, 2);
// 保存函数上下文对象
const self = this;
return function () {
if (!canPlay) {
return
}
canPlay = false;
setTimeout(() => {
cb.apply(self, args);
canPlay = true;
}, wait)
}
}

我们只需要把要做节流的回调函数,等待的时间和回调函数的参数传入throttle中即可,

效果和上面一样。

还有一种方法:

function throttle1(cb, wait) {
let preTime = 0;
// 截取传递过来的参数
const args = [].slice.call(arguments, 2);
// 保存函数上下文对象
const self = this;
return function () {
const lastTime = new Date().getTime();
if (lastTime - preTime < wait) {
return
}
cb.apply(self, args);
preTime = lastTime;
}
}

每次比较一下当前时间和上一次保存的时间, 只有

两者的差值大于wait的时候才会触发回调函数, 这种方法和上一种方法的

唯一区别就是这种方法一进去就触发了一次, 

两种方法根据需求来选择了,

如果要延迟触发就选第一种,

如果要立即触发一次就选第二种。

 

使用防抖:

const scrollSection = document.getElementsByClassName('scroll-section')[0];
const params = ['防抖'];
scrollSection.addEventListener('scroll',deBounce(callback,2000,...params), false);

function callback(str) {
console.log(str);
}
// 防抖函数
function deBounce(cb, wait) {
let timer = null;
// 截取传递过来的参数
const args = [].slice.call(arguments, 2);
// 保存函数上下文对象
const self = this;
return function () {
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
cb.apply(self, args);
}, wait)
}
}

原理: 如果事件一直触发, 每次触发把前一次的定时器给清除,这样事件处理函数就一直不会触发,

    只有当事件停止触发两秒后,才会触发事件处理函数。

 

 感谢观看

转载于:https://www.cnblogs.com/LHLVS/p/10770112.html

  • 点赞
  • 收藏
  • 分享
  • 文章举报
anhuyong5631 发布了0 篇原创文章 · 获赞 0 · 访问量 202 私信 关注
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: