节流和防抖的区别

云雾Ⅶ

于 2024-08-21 15:43:48 发布

阅读量279

点赞数 7

文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/SR003/article/details/141361129

版权

节流（Throttle） 和 防抖（Debounce） 是两种常见的函数优化技术，通常用于控制高频率触发的事件（例如窗口缩放、滚动、输入等）。它们的目的都是为了提高性能，避免因频繁触发某些事件导致性能下降或其他问题。

一、节流（Throttle）

节流的原理 是让某个函数在一定时间间隔内只执行一次。即使在这个时间间隔内这个函数被多次调用，它也只会执行一次。可以形象地理解为：在规定时间内，无论触发多少次事件，函数只执行一次。

实现原理

记录上一次函数执行的时间戳。
每次触发事件时，比较当前时间和上一次执行的时间，如果超过了设定的时间间隔，就执行函数并更新时间戳。

适用的业务场景

窗口的 resize 事件：调整窗口大小时频繁触发，可以使用节流来控制执行频率。
页面滚动 scroll 事件：用户滚动页面时频繁触发，可以使用节流来减少事件处理的次数。
按钮点击事件：防止用户频繁点击按钮导致的重复提交。

代码示例

function throttle(func, delay) {
  let lastTime = 0;
  return function(...args) {
    const now = Date.now();
    if (now - lastTime >= delay) {
      lastTime = now;
      func.apply(this, args);
    }
  };
}
const handleResize = throttle((event, customParam) => {
  console.log('窗口大小改变，参数：', customParam);
}, 500);
window.addEventListener('resize', (event) => handleResize(event, '参数传递'));

二、防抖（Debounce）

防抖的原理 是让某个函数在某段时间内没有被再次触发时才执行。即如果在这段时间内函数被再次调用了，则重新计时。可以形象地理解为：等用户的输入或操作稳定后再执行某个函数。

实现原理

每次事件触发时，清除之前的延迟调用。
重新设置一个新的延迟调用。

适用的业务场景

搜索框输入：用户输入时频繁触发搜索查询，可以使用防抖来减少查询次数，只在用户停止输入一段时间后再进行查询。
表单验证：用户输入表单时，实时验证可以使用防抖来减少验证次数。
窗口的 resize 事件：调整窗口大小后，稳定一段时间再做处理。

代码示例

<template>
  <el-input v-model="value" @input="handleSearch"></el-input>
</template>

function debounce(func, delay) {
  let timeout;
  return function(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}
const handleSearch = debounce((val) => {
  console.log('搜索查询,参数：',val);
}, 500);