代码抗击病毒之-大厂面试必考题总结

前端

2023-09-26 12:25:25

在代码世界，有许许多多的“病毒”，时刻威胁着代码的安全。防抖和节流函数，就如同两剂良药，可以帮助开发者抵御这些“病毒”，维护代码的健康。现在，就让我们一起来深入了解这两大函数，掌握它们的原理和用法，为代码保驾护航吧！

防抖函数

防抖函数的作用是，在事件被触发n秒后再执行回调。如果在这n秒内又被触发，则重新计时。这一特性非常适合用于处理频繁触发的事件，比如窗口调整大小、鼠标移动等。通过防抖，我们可以减少不必要的函数调用，提高代码的性能。

原理

防抖函数的原理很简单，它使用了一个定时器。当事件第一次被触发时，它会启动一个定时器，并将回调函数作为参数传递给定时器。如果在定时器超时之前，事件又被触发，那么它会重新启动定时器。只有当定时器超时，才会执行回调函数。

用法

防抖函数的使用也非常简单。我们只需要创建一个防抖函数，并将需要防抖的事件处理函数作为参数传递给它。然后，我们将防抖函数作为事件处理函数注册到事件上。

function debounce(func, wait) {
  let timer;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, args);
    }, wait);
  };
}

// 使用防抖函数处理窗口调整大小事件
window.addEventListener('resize', debounce(function () {
  // 在窗口调整大小n秒后执行回调函数
}, 300));

节流函数

节流函数的作用是，规定在一个单位时间内，只能触发一次函数。如果在这个单位时间内触发多次，则只有第一次的触发会被处理。这一特性非常适合用于处理频繁触发的事件，比如键盘输入、鼠标点击等。通过节流，我们可以减少不必要的函数调用，提高代码的性能。

原理

节流函数的原理也很简单，它使用了一个标记变量来记录函数是否正在执行。当事件被触发时，它会首先检查标记变量是否为true。如果为true，则说明函数正在执行，它会直接返回。如果为false，则说明函数没有正在执行，它会将标记变量设置为true，并执行回调函数。在回调函数执行完成后，它会将标记变量设置为false。

用法

节流函数的使用也同样简单。我们只需要创建一个节流函数，并将需要节流的事件处理函数作为参数传递给它。然后，我们将节流函数作为事件处理函数注册到事件上。

function throttle(func, wait) {
  let isThrottling = false;
  return function (...args) {
    if (isThrottling) {
      return;
    }
    isThrottling = true;
    setTimeout(() => {
      func.apply(this, args);
      isThrottling = false;
    }, wait);
  };
}

// 使用节流函数处理鼠标点击事件
document.addEventListener('click', throttle(function (e) {
  // 在鼠标点击后n秒内只执行一次回调函数
}, 300));