一、函数节流
某函数在指定时间间隔内执行，如：每1秒执行一次
1、第一次就执行
// 对函数进行 节流
function throttle (fn, delay = 1000) {
let flag = true;
return (...args) => {
if (flag) {
flag = false;
fn(...args);
setTimeout(() => {
flag = true;
}, delay);
}
};
}
// 需要被节流的 函数
function scrollHandler (arg) {
console.log(`${arg}--被执行了`);
}
// 被节流的函数 -- 节流限制： 每 1000 毫秒执行一次
const throttleFunc = throttle(scrollHandler, 1000);
let i = 0;
// 模拟 页面滚动事件
const interval = setInterval(() => {
console.log(`我是：${i}`);
throttleFunc(i++);
}, 10);
2、首次不执行，需等待delay时间后才能执行第一次
function throttle(fn, delay = 1000) {
let prevTime = Date.now();
return function () {
let curTime = Date.now();
if (curTime - prevTime > delay) {
fn.apply(this, arguments);
prevTime = curTime;
}
};
}
// 需要被节流的 函数
function scrollHandler (arg) {
console.log(`${arg}--被执行了`);
}
// 被节流的函数 -- 节流限制： 每 1000 毫秒执行一次
const throttleFunc = throttle(scrollHandler, 1000);
let i = 0;
// 模拟 页面滚动事件
const interval = setInterval(() => {
console.log(`${i} --- 进来了，但是不知道有没有执行`);
throttleFunc(i++);
}, 10);
二、函数防抖
当持续触发事件时，只有在规定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。
就像游戏里放技能时需要读条一样，读条结束才能放出技能，但是在读条结束前，你又按了一次技能，那么只能重新读条。
function debounce(func, wait) {
let timeout;
return function() {
const context = this;
const args = arguments;
clearTimeout(timeout);
timeout = setTimeout(() => {
func.apply(context, args);
}, wait);
};
}
// 使用
window.onscroll = debounce(function() {
console.log('debounce');
}， 1000);
