虾扯蛋之函数防抖和节流 - 掘金
先贴贴 这个哥们的。 因为我看了很多,感觉大多都是复制。没有啥思考
在介绍以下这些问题的时候。先公示下我思考的时候出现的问题
1、如果你使用 onclick 和 addEventListenter 需要明白他们的区别 ,其实没啥好说的但是有一点请记住 onclick 不能使用闭包或者匿名函数。
2、那就是 在闭包的情况下 函数内部的变量为什么还是可以被return出来的function保持访问等等,可以从call stack和scope独立的角度来理解 。(这个我暂时也是迷糊的)但是以闭包的角度看就没啥问题。具体词法作用域的问题 堆 栈问题 可以以后深入
以上问题大致了解之后看我们的重点
一、防抖
概念:当持续触发事件时, 合并事件且不会去触发事件,当一定时间内没有触发再这个事件时,才真正去触发事件(当然分立即执行或者延迟执行)。
什么是防抖?能不能通俗点?举几个栗子
1、武侠 高手对付低手,一瞬间就给低手100次,100次全部打中。但是碰到另一个高手,打了100次 就就打中了2次
2、上公交 本来是1个人上车就 司机就关门开车, 但是一下来了很多人,于是就都上了 才关门开车
<script>
var xcd = document.getElementById('xcd');
var count = 1;
//要执行的操作 数字+1
function doSomething() {
xcd.innerHTML = count++;
};
function debounce(doSomething, wait) {
var timeout;
return function () {
var _this = this,
_arguments = arguments;
console.log(timeout); // 点击次数
clearTimeout(timeout);
timeout = setTimeout(function () {
doSomething.apply(_this, _arguments);
}, wait);
}
}
xcd.onclick = debounce(doSomething, 1000);
</script>
上述 会出现啥效果呢
就是我连续点击 count 就加1 然后显示出来,如果我超过一秒没有点击 再点一次就再加1
到这里你应该彻底明白啥事防抖了
如下图
![cf00be614b168d3eab619189c3573302.png](https://i-blog.csdnimg.cn/blog_migrate/4e5798d5e2ba78a468ddd24ef5f4a120.jpeg)
![8990410507110fd4d34494be656b26e2.png](https://i-blog.csdnimg.cn/blog_migrate/48252b9d64a93e500a8d863c6d2bd0a5.jpeg)
以上就是最基本的防抖措施
二、函数节流
概念:持续触发事件时,throttle 会合并一定时间内的事件,并在该时间结束时真正去触发一次事件
这个不是很绕口 ,可以理解啊。 就是一定时间内 只能触发一次
function doSomething1() {
xcd1.innerHTML = count++;
};
const throttle = (func, wait, ...args) => {
let pre = 0;
return function () {
const context = this;
let now = Date.now();
console.log(now);
if (now - pre >= wait) {
func.apply(context, args);
pre = Date.now();
}
}
}
xcd1.onclick = throttle(doSomething1, 1000);
![e34e54520b72311192cd236a94f78d8d.png](https://i-blog.csdnimg.cn/blog_migrate/b731bd3bb0d18f0fe3c9b3137baaa095.jpeg)
当然你们还可以扩展