手写节流防抖函数

防抖函数

通俗点来说，防抖函数就是在用户的连续操作中，在一定时间段内最终只执行一次的函数。

实现思路如下：

1. 实现在一定时间段内只执行一次：可以通过 setTimeout、 clearTimeount实现
2. this指向问题：直接执行函数时，this指向windows，可以通过apply实现改变this指向

节流函数

节流函数是为了实现一段时间内只执行一次的函数。

实现思路与防抖函数类似：

1. 实现一段时间内只执行一次：可以通过本次和上次执行时间差值 与 定义时间段相比较实现
2. this指向问题：直接执行函数时，this指向windows，可以通过apply实现改变this指向

具体代码与测试方法

// 测试方法
function fn1 (name) {
    console.log(name);
}
 let fn2 = throttle(fn1, 1024);
 for (let i = 0; i < 3; i++) {
    setTimeout(() => {
         fn2(i + 'name');
     }, i * 1000);
 }
  let fn3 = debounce(fn1, 1024);
 for (let i = 0; i < 3; i++) {
    setTimeout(() => {
         fn3(i + 'name');
     }, i * 1000);
 }

// 防抖
function debounce (fun, time) {
    let timer;
    return function () {
        if (timer) {
            clearTimeout(timer);
        }
        // 改变this指向
        let args = arguments;
        timer = setTimeout(() => {
            // 如果直接使用 arguments 使用的实际上是 setTimeout 的参数，所以需要定义args提前赋值留存参数
            fun.apply(this, args);
        }, time);
    };
}
// 节流
function throttle (fun, time) {
    let t1 = 0;
    return function () {
        let t2 = new Date();
        if (t2 - t1 > time) {
            fun.apply(this, arguments);
            t1 = t2;
        }
    };
}

上述关于节流防抖函数的实现是自己学习的记录，更详细的实现方法大家可以看一下 一杯茶的时间🍵，带你彻底学会手写防抖节流 - 掘金 (juejin.cn)