问题:
有时候多次点击按钮会多次触发响应时间,尤其是向后台请求数据时,多次请求更容易造成卡顿。
解决:
1. 防抖:规定时间内,以最新的触发事件为准,取消之前的事件,执行最新的事件
2. 节流:规定时间内,以第一次触发为准,之后的触发在第一次操作还存在的情况下,忽略事件触发。
具体实现:
// 防抖:
// 规定时间内,每次触发都会取消掉之前的定时器,创建新的定时器,若规定时间内未再次触发,则规定时间之后执行函数
// 第一参数是触发的函数,第二参数是延时时间
function debounce(fn, wait) {
let timeout = null;
return function() {
if(timeout !== null) clearTimeout(timeout);
timeout = setTimeout(fn, wait);
}
}
window.addEventListener('click', debounce(handle, 3000));
// 节流:
// 规定时间内只执行一次,如果存在已创建的定时器就不会再创建新的定时器
// 第一参数是触发的函数,第二参数是延时时间
// 定时器版
function throttle(func, wait) {
let timeout;
return function() {
if (!timeout) {
timeout = setTimeout(()=> {
func();
timeout = null;
}, wait)
}
}
}
// 时间戳版:
function throttle(func, wait) {
let previous = 0;
return function() {
let now = Date.now();
let context = this;
let args = arguments;
if (now - previous > wait) {
func.apply(context, args);
previous = now;
}
}
}
function handle() {
console.log("你好");
}
window.addEventListener('click', throttle(handle, 3000));