js防抖函数和节流函数使用场景和实现区别示例分析

JS防抖函数和节流函数是前端开发中常用的函数优化方法，可以有效提升页面性能和用户体验。它们的使用场景和实现区别如下：

防抖函数

防抖函数的作用是在函数触发频繁的情况下，限制函数执行的次数，确保函数在触发后的一定时间内只执行一次。

使用场景

防抖函数通常用于以下场景：

• 搜索框输入联想：用户在输入框中快速输入字符时，会触发搜索请求，而防抖函数可以限制请求发送的次数，避免频繁的请求。
• 按钮提交事件：由于用户可能会多次点击提交按钮，而防抖函数可以确保只有最后一次点击会触发提交事件。

实现方式

使用JavaScript实现防抖函数的代码如下：

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

上述代码实现了一个通用的防抖函数。其中，fn参数是需要处理的函数，delay参数是限制函数执行的时间间隔。函数返回一个闭包，用来保存定时器对象和参数列表。当此函数被执行时，首先清除之前的定时器，然后再设置一个新的定时器，并在一定时间内执行函数。

示例说明

假设我们有一个搜索框输入联想功能，需要尽可能地减少发送网络请求的次数，我们就可以使用防抖函数优化代码：

<input type="text" id="search">
<script>
const searchInput = document.getElementById('search');
const debounceSearch = debounce(() => {
  // 发送搜索请求
}, 300);

searchInput.addEventListener('input', debounceSearch);
</script>

上述代码中，我们为输入框添加了input事件，当用户在输入框中输入字符时，会触发debounceSearch函数。由于debounce()函数的第二个参数是300ms，所以当用户在300ms内持续输入字符时，不会触发搜索请求。等待300ms后，会执行最后一次输入操作所触发的搜索请求。

节流函数

节流函数的作用是在函数持续频繁触发的情况下，限制函数的执行频率，确保函数在一定时间片段内只执行一次。

使用场景

节流函数通常用于以下场景：

• 页面滚动监听：页面滚动事件会频繁触发，但是实际上只需要显示当前滚动位置附近的内容，而节流函数可以确保滚动事件每隔一定时间片段才触发。
• 鼠标移动事件：鼠标移动事件同样会频繁触发，而节流函数可以确保每隔一定时间间隔才触发鼠标移动事件。

实现方式

使用JavaScript实现节流函数的代码如下：

function throttle(fn, delay) {
  let last = 0;
  return function(...args) {
    const now = Date.now();
    if (now - last > delay) {
      fn.apply(this, args);
      last = now;
    }
  }
}

上述代码实现了一个通用的节流函数。其中，fn参数是需要处理的函数，delay参数是限制函数执行的时间间隔。函数返回一个闭包，用来保存上一次函数执行的时间戳。当此函数被执行时，如果当前时间和上一次执行时间超过了设定的时间间隔，则执行一次函数，并更新上一次执行时间。

示例说明

假设我们需要在页面滚动时来更新页面标题，但是需要确保标题的更新频率不要太高，我们就可以使用节流函数优化代码：

<h1 id="title">标题</h1>
<script>
const titleElement = document.getElementById('title');
const throttleUpdateTitle = throttle(() => {
  const scrollTop = document.documentElement.scrollTop;
  titleElement.innerText = `当前滚动高度：${scrollTop}px`;
}, 300);

window.addEventListener('scroll', throttleUpdateTitle);
</script>

上述代码中，我们为window对象的scroll事件添加了节流函数throttleUpdateTitle。当用户滚动页面时，会更新标题文字，但是由于节流函数设置的时间间隔为300ms，所以每次滚动事件只有间隔大于300ms时才会更新标题文字。这样可以避免滚动引起的频繁更新，提高页面性能和用户体验。