web项目开发之JS函数防抖与节流示例代码

下面来详细讲解“web项目开发之JS函数防抖与节流示例代码”的完整攻略。

什么是函数防抖和节流

在理解函数防抖和节流之前，先来看一下JS中的函数执行机制。当你在页面中注册了一个事件处理函数后，当相应事件被触发时会不断地调用该函数。然而，有时候你可能会希望函数的执行可以控制到你期望的频率或时间间隔以内，这时就需要用到函数防抖和函数节流。

函数防抖的目的是为了避免函数的过度执行，比如当用户频繁操作一个按钮时，如果不采用函数防抖，那么每次操作都会触发该按钮的事件处理函数，导致浏览器的CPU负载过高，影响浏览器的性能。函数节流的目的也是为了控制函数的执行频率，但是采用的方式与函数防抖略有不同，它会使函数在一段时间内只执行一次，而不是一直等待上一个函数执行完成，效果类似于定时器。

函数防抖的代码实现

函数防抖的实现方法是当事件被触发时，设置一个定时器，在指定的时间间隔过后再去执行该处理函数，如果在这个时间段内再次触发事件，则会清除之前的定时器，并重新设置一个新的定时器，如此循环，从而达到控制触发频率的效果。

下面是基于原生JS实现的函数防抖的代码示例：

function debounce(func, delay) {
  let timeout;
  return function() {
    const context = this;
    const args = arguments;
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(context, args);
    }, delay);
  };
}

// 用法示例
function handleInput() {
  // 处理用户输入
}

document.querySelector('input').addEventListener('input', debounce(handleInput, 500));

上面的代码中，我们定义了debounce函数，它实际上是一个高阶函数，接收一个处理函数和一个时间间隔作为参数，返回一个新的函数。新的函数在触发时会先清除上一次设置的定时器，然后再创建一个新的定时器，最终在指定的时间间隔过后执行原来的处理函数。

函数节流的代码实现

函数节流的实现方法是使用一个变量来记录上一次执行函数的时间戳，每次执行函数时，先判断当前时间戳和上一次执行时间戳的间隔，如果大于指定的时间间隔，则执行函数并更新记录的时间戳，否则不执行。这样就可以控制函数的执行频率，避免过度执行。

下面是基于原生JS实现的函数节流的代码示例：

function throttle(func, interval) {
  let lastTime = 0;
  return function() {
    const nowTime = new Date().getTime();
    if (nowTime - lastTime > interval) {
      func.apply(this, arguments);
      lastTime = nowTime;
    }
  };
}

// 用法示例
function handleInput() {
  // 处理用户输入
}

document.querySelector('input').addEventListener('input', throttle(handleInput, 500));

上面的代码中，我们定义了throttle函数，也是一个高阶函数。该函数接收一个处理函数和一个时间间隔作为参数，返回一个新的函数。在新的函数中我们使用了一个变量lastTime来记录上一次执行的时间戳，每当新的函数被触发时，会通过new Date().getTime()获取当前时间戳，并判断与上一次执行时间戳的间隔是否大于指定的时间间隔，从而控制是否执行函数。

示例说明

示例1：防抖实现

首先，我们来看一个实际应用中使用函数防抖的场景。比如，你有一个查询输入框，当用户输入查询条件时，需要将该条件提交给服务器进行查询，但是如果用户连续输入多个关键字，则会频繁地发送请求，显然这是不可取的。这时候我们就可以使用函数防抖来控制查询请求的触发频率。

在下面的示例中，我们对该查询输入框绑定了一个input事件，每当用户输入时，会触发我们定义的handleInput函数，但是由于我们对该函数进行了防抖处理，所以只有当用户停止输入500ms后才会真正地执行该函数，也就是只有当用户已经输入完整个查询条件后，我们才会将该条件提交给服务器进行查询操作。

function debounce(func, delay) {
  let timeout;
  return function() {
    const context = this;
    const args = arguments;
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(context, args);
    }, delay);
  };
}

function handleInput() {
  const query = document.querySelector('input').value;
  // 执行查询操作
}

document.querySelector('input').addEventListener('input', debounce(handleInput, 500));

示例2：节流实现

接下来，我们再来看一个使用函数节流的场景。假设你有一个滚动条，每当用户滚动时，需要执行一些操作，但是由于滚动的过程非常快，所以函数也会被连续执行多次，此时我们可以使用函数节流来控制函数执行的频率。

在下面的示例中，我们对该滚动条绑定了一个scroll事件，每当用户滚动时，会触发我们定义的handleScroll函数，由于我们对该函数进行了节流处理，所以在500ms内，该函数只会被执行一次，从而达到了控制函数执行频率的效果。

function throttle(func, interval) {
  let lastTime = 0;
  return function() {
    const nowTime = new Date().getTime();
    if (nowTime - lastTime > interval) {
      func.apply(this, arguments);
      lastTime = nowTime;
    }
  };
}

function handleScroll() {
  // 执行一些操作
}

document.querySelector('div').addEventListener('scroll', throttle(handleScroll, 500));

以上是“web项目开发之JS函数防抖与节流示例代码”的完整攻略，希望能对你有所帮助。