JavaScript 节流函数 Throttle 详解

什么是节流函数

函数节流是一种通过控制函数执行频率的技术，可以让我们控制一个函数在一段时间时间内执行多少次。它可以解决一些频繁触发事件的问题，例如页面滚动的触发事件。

为何需要使用节流函数

在一些需要频繁执行的L函数中，比如页面滑动事件，如果不做任何优化处理，就会导致多次重复计算、频繁造成 DOM 渲染，影响页面性能，甚至可能会导致浏览器挂掉。这时，就可以使用函数节流来解决这些问题，避免重复执行。

实现节流函数

我们可以通过 setTimeout 和 Date 来实现节流函数，简单的实现代码如下：

 function throttle(fn, delay) {
     let flag = true;
     return function() {
         if (flag) {
             flag = false;
             setTimeout(() => {
                 fn();
                 flag = true;
             }, delay);
         }
     }
 }

以上代码中，throttle 函数具有两个参数，第一个是需要被执行的函数，第二个是节流的时间（单位为毫秒）。flag 变量初始值为 true，代表第一次调用后需要等待才能再次调用，setTimeout 用来控制节流时间。

节流函数的应用场景

由于函数节流可以让我们减少函数的执行次数，优化了代码的性能，因此在一些需要频繁执行的代码中特别有用，比如：

1. 监听页面滚动事件

在监听页面滚动事件时，很容易就会因为滚动距离的微小变化而频繁触发函数。而这个时候，函数节流就可以很好地解决这个问题。

举个例子：

    window.addEventListener('scroll', throttle(handleScroll, 200));

    function handleScroll() {
      console.log('scroll event');
    }

以上代码中，我们将 handleScroll 函数通过 throttle 函数传入给监听器，控制了监听事件执行的时间间隔为 200ms。

2. 搜索框实时显示搜索结果

当用户在搜索框中输入关键词时，我们希望搜索结果能够实时显示出来，而这个时候函数节流也可以大显身手。

    const inputEle = document.querySelector('#search-input');
    const searchEle = document.querySelector('#search-list');
    const searchThrottle = throttle(searchInput, 200);

    inputEle.addEventListener('input', searchThrottle);

    function searchInput(event) {
      // 获取输入框文本内容，并根据实时的输入值查询相关数据
      const value = event.target.value;
      console.log(`searching for ${value}`);
      // 省略其他查询操作和页面展现
    }

以上代码中，searchInput 函数使用节流实现了在用户输入搜索关键词时，将搜索结果实时地展现在页面上。由于节流时间被设置为了 200ms，搜索结果的实时展现不会让页面变得过于卡顿，同时也减少了请求后端服务的压力。