函数的防抖和节流
防抖和节流都是为了防止短时间内高频繁调用同一接口的
函数防抖
设置延时器,短时间高频率触发只有最后一次触发成功
// 防抖:设置延时器,短时间高频率触发只有最后一次触发成功
var timer;
document.getElementById("btn").onclick = function () {
clearTimeout(timer);
timer = setTimeout(function () {
console.log(1111)
},1000);
};
//这里把定时器类比为一个请求
函数节流
设置状态锁,短时间高频率触发只有第一次触发成功
var key = false;
document.getElementById("btn").onclick = function () {
if (!key) {
key = true;
console.log(111);
// 请求,请求完成后,再次变为fasle,
setTimeout(function () {
key = false;
}, 1000);
}
};
区别
函数节流不管事件触发有多频繁,都会保证在规定时间内一定会真正执行一次时间处理函数,而函数防抖只是在最后一次触发才会执行。