关于防抖和节流

// 防抖函数：tt是函数名，fn是要干的活，delay是等多久（毫秒）
function tt(fn, delay) {
  let time = null; // 相当于“电梯的倒计时器”
  return function(...args) {
    if (time) { // 只要有人新进来（再次触发）
      clearTimeout(time); // 就把之前的倒计时清掉
    }
    // 重新定一个新倒计时：等delay毫秒后再干活
    time = setTimeout(() => {
      fn.apply(this, args); // 执行要干的活（比如发搜索请求）
      time = null; // 干完活把倒计时器清空
    }, delay);
  };
}

// 怎么用？拿“搜索”举例
// 1. 先写“要干的活”：比如发搜索请求
function search(keyword) {
  console.log("发请求搜：", keyword); // 实际项目里这里会写真正的搜索逻辑
}

// 2. 用防抖函数tt包装search，设定“停输500毫秒再搜”
const debouncedSearch = tt(search, 500);

// 3. 给输入框加事件：打字时触发包装后的函数
const inputBox = document.querySelector("input"); // 找页面里的输入框
inputBox.addEventListener("input", function(e) {
  debouncedSearch(e.target.value); // 把输入的内容传给搜索函数
});

// 节流函数：throttled1是函数名，fn是要干的活，delay默认500毫秒（可改）
function throttled1(fn, delay = 500) {
  let oldtime = Date.now(); // 记录“上一次干活的时间”（初始是当前时间）
  return function(...args) {
    let newtime = Date.now(); // 每次触发时，拿“现在的时间”
    // 如果“现在 - 上次干活时间”≥delay，就执行一次
    if (newtime - oldtime >= delay) {
      fn.apply(null, args); // 执行要干的活（比如查加载）
      oldtime = Date.now(); // 干完活，把“上次时间”更改为现在
    }
  };
}

// 怎么用？拿“滚动加载”举例
// 1. 先写“要干的活”：比如查要不要加载新内容
function checkLoadMore() {
  console.log("看看要不要加载新朋友圈～"); // 实际项目里这里写判断逻辑
}

// 2. 用节流函数throttled1包装，设定“每300毫秒查一次”
const throttledLoad = throttled1(checkLoadMore, 300);

// 3. 给页面加滚动事件：滚动时触发包装后的函数
window.addEventListener("scroll", throttledLoad);