手搓节流 throttle

一句话概括节流：高频事件触发，在n秒内只会执行一次，所以节流处理执行频率。

总结

节流函数是前端开发中常用的性能优化手段，通过控制函数的执行频率，可以有效地降低资源消耗，提升用户体验。在实际项目中，合理使用节流函数能够有效应对各种需要频繁触发的场景，是优化前端性能的重要一环。

效果：

一秒内，输入打印，结果：限制函数执行频率的方法，确保函数在一定时间间隔内最多执行一次

节流 throttle 

// 节流函数，设置默认时间为200毫秒
const throttle = (func, delay= 200) => {
    if (typeof func !== 'function') {
        throw new TypeError('需要一个函数作为参数');
    }
    delay= +delay|| 0;
    let lastTime = 0;

    return function () {
        const self = this;
        const args = arguments;
        let currentTime = +new Date(); // 获取当前时间

        if (currentTime - lastTime > delay || !lastTime) {
            // 如果距离上次执行的时间超过了间隔时间，或者是第一次调用
            func.apply(self, args); // 执行函数
            lastTime = currentTime; // 更新上次执行时间
        }
    };
};

 使用方法

假设我们有一个需求：在用户输入内容后，每隔1秒执行相应的操作，例如发送网络请求或更新界面。我们可以利用上述节流函数来实现这一需求。

    // 输入内容即显示
    changeInput () {
      console.log('输入内容即显示', this.userName);

      // 调用节流的方法
      this.console()
    },

    // 节流 输入后 1s 内只会请求一次
    console:throttle(function() {
      console.log('节流打印', this.userName);
      // 这里就可以调用请求方法
    }, 1000),

 在这个示例中，changeInput 方法用于监听用户的输入事件，而 console 方法则是通过 throttle 函数包裹，确保在1秒内最多执行一次。这样就能有效地减少函数的频繁执行，提高页面的响应速度和性能表现。

一般项目直接使用：

 // 节流 输入后 1s 内只会请求一次
    changeInput:throttle(function() {
      console.log('节流打印', this.userName);
      // 这里就可以调用请求方法
    }, 1000),

代码解释：

1. 函数功能：

   • 节流（Throttle） 是一种限制函数执行频率的方法，确保函数在一定时间间隔内最多执行一次。在你的实现中，通过比较当前时间与上次执行时间的差值来决定是否执行函数。

2. 参数与返回值：

   • func 是要执行的函数，delay 是执行的时间间隔，默认为 200 毫秒。
   • 返回一个闭包函数，实际执行时会根据时间间隔控制是否执行 func。

3. 时间处理：

   • currentTime - lastTime > delay 表示距离上次执行的时间超过了指定的间隔时间，此时执行 func。
   • !lastTime 表示第一次调用时也会直接执行 func。

4. 执行上下文和参数传递：

   • 使用 apply(self, args) 来确保在闭包函数中正确传递执行上下文和参数。

5. 注意事项：

   • 确保节流函数在不同场景下的适用性，例如处理用户输入、滚动事件等需要控制频率的情况。
   • 可以根据实际需要调整 delay 参数，以满足特定场景下的执行频率要求。

6. 返回函数的执行频率：

   • 节流函数保证了 func 在 delay 内最多执行一次。如果在短时间内频繁触发调用，函数执行会被限制在指定的时间间隔内，从而减少不必要的计算或操作。

这种实现方式可以有效地应用于需要限制函数执行频率的场景，提升应用性能和用户体验。

关于当防抖，请点击这里：手写防抖debounce