手写防抖和节流
写在前面：不要防抖和节流会有什么问题？
- 一个流浪汉向你乞讨：给我点钱吧，给我点钱吧，给我点钱吧....，他讲了十次，你发了善心，他每说一次你都给了一次钱，最后你钱包空了。。。（逃；
推荐视频地址：手写节流和防抖
手写防抖和节流
防抖
指触发事件后在规定时间内回调函数只能执行一次，如果在规定时间内又触发了该事件，则会重新开始算规定时间。
即：延时执行
大白话：一个流浪汉向你乞讨：给我点钱吧，给我点钱吧，给我点钱吧....，他讲了十次，你发了善心，最后给了钱
<body>
<button>节流</button>
<script>
let button = document.querySelector('button');
button.onclick = debounce(add, 2000);
function add(num, num2) {
console.log(1 + num + num2)
}
//防抖
function debounce(func, delay) {
let time = null;
return function (...arg) {
if (time) clearTimeout(time);
time = setTimeout(() => {
func.apply(this, arg)
}, delay);
}
}
</script>
</body> 节流
当持续触发事件时，在规定时间段内只能调用一次回调函数。如果在规定时间内又触发了该事件，则什么也不做,也不会重置定时器.
即：定频率执行
大白话：一个流浪汉向你乞讨：给我点钱吧，给我点钱吧，给我点钱吧....，他讲了十次。你发了善心，在他第一次讲的时候就给了钱，在他第十次讲的时候又给了一次钱
<body>
<button>节流</button>
<script>
let button = document.querySelector('button');
button.onclick = throttle(add, 2000);
function add(num, num2) {
console.log(1 + num + num2)
}
function throttle(func, wait) {
let old = 0;
return () => {
let now = new Date().valueOf();
if (now - old > wait) {
let context = this;
let args = [1, 2];
func.apply(context, args);
old = now;
}
}
}
//定时器实现
function throttle(func, wait) {
let timeout;
return () => {
if (!timeout) {
timeout = setTimeout(() => {
let context = this;
let args = [1, 2];
func.apply(context, args);
timeout =null;
}, wait);
}
}
}
</script>
</body> 那在项目中到底哪里需要防抖和节流呢？
节流
以商品进度条为例，不是滚动的每个时刻都要监听进度条，因此可以通过节流来限制
防抖
以商品图片加载为例，图片加载使得滚动
查看10道真题和解析