JS--函数节流+函数防抖

一、函数节流

某函数在指定时间间隔内执行，如：每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);