JavaScript防抖动与节流处理

JavaScript中防抖动和节流是常用的优化技术，用于优化页面交互和性能，下面将详细介绍防抖动和节流的实现原理以及应用场景。

什么是防抖动

在JavaScript处理页面事件时，比如按钮点击事件，如果用户频繁点击，则会导致事件的重复执行，从而浪费资源并影响用户体验。防抖动的作用是将这些重复的事件的执行合并为一次执行，从而优化页面性能。

实现原理：防抖动的原理是，设置一个定时器，延迟一段时间执行事件处理函数，如果该事件在延迟时间内再次触发，就重新设置定时器，直到延迟时间到达后，执行一次事件处理函数。

以下是一个简单的防抖动实现代码：

function debounce(fn, delay) {
  let timer = null;
  return function(...args) {
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
}

上述代码使用闭包保存定时器，每次执行事件处理函数前先清除之前设置的定时器，再设置一个新的定时器。这样当连续触发事件时，只有最后一次触发事件会执行事件处理函数。

下面是一个例子，用防抖动优化用户搜索输入框：

<input id="searchInput" type="text">

<script>
const searchInput = document.getElementById('searchInput');

function debounce(fn, delay) {
  let timer = null;
  return function(...args) {
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
}

function search() {
  console.log('search');
}

searchInput.addEventListener('input', debounce(search, 500));
</script>

上述代码中，将search函数使用防抖动函数包装，用户在输入搜索内容时，只有在输入停止500毫秒后才会执行搜索功能。这样可以优化用户体验以及减少不必要的请求。

什么是节流

在JavaScript处理页面事件时，比如滚动事件，如果处理函数非常耗费资源，如果在每次事件触发时都执行事件处理函数，会造成浏览器卡顿或崩溃。而节流的作用是，限制事件处理函数的执行频率，从而优化页面性能。

实现原理：节流的原理是，设置一个定时器，在规定时间内只执行一次事件处理函数，如果成功执行该次事件，则继续执行下一次任务，否则等待下一次触发事件的时间到达时执行事件处理函数。

以下是一个简单的节流实现代码：

function throttle(fn, delay) {
  let timer = null;
  return function(...args) {
    if (!timer) {
      timer = setTimeout(() => {
        fn.apply(this, args);
        timer = null; 
      }, delay);
    }
  };
}

上述代码使用闭包保存定时器，每次执行事件处理函数前先检查是否存在未执行的定时器，如果存在则返回，如果不存在则执行事件处理函数，并设置一个定时器，以延迟执行下一个任务。

下面是一个例子，使用节流优化用户滚动事件：

<div id="scrollBox">
  <p>Scroll down to see the effect.</p>
  <ul id="list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>
    <li>Item 9</li>
    <li>Item 10</li>
  </ul>
</div>

<script>
const scrollBox = document.getElementById('scrollBox');
const list = document.getElementById('list');

function throttle(fn, delay) {
  let timer = null;
  return function(...args) {
    if (!timer) {
      timer = setTimeout(() => {
        fn.apply(this, args);
        timer = null; 
      }, delay);
    }
  };
}

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

scrollBox.addEventListener('scroll', throttle(handleScroll, 200));
</script>

上述代码中，将handleScroll函数使用节流函数包装，用户滚动时，只有在200毫秒内执行一次滚动事件，这样可以减少浏览器负担，提高用户体验。