vue 节流函数防抖函数封装_优秀笔记的专栏文章_微信文章

概念

节流节流的意思是，规定时间内，只触发一次。比如我们设定500ms，在这个时间内，无论点击按钮多少次，它都只会触发一次。具体场景可以是抢购时候，由于有无数人快速点击按钮，如果每次点击都发送请求，就会给服务器造成巨大的压力，但是我们进行节流后，就会大大减少请求的次数。
防抖防抖的意思是，在连续的操作中，无论进行了多长时间，只有某一次的操作后在指定的时间内没有再操作，这一次才被判定有效。具体场景可以搜索框输入关键字过程中实时请求服务器匹配搜索结果，如果不进行处理，那么就是输入框内容一直变化，导致一直发送请求。如果进行防抖处理，结果就是当我们输入内容完成后，一定时间(比如500ms)没有再输入内容，这时再触发请求。

下面简单画下流程图

节流 throttle

在高频触发回调函数时，节流操作使回调函数在每隔一段时间定期执行一次，时间间隔内再触发，不会重新执行。

核心在于让一个函数不要执行的太频繁，减少一些过快的操作。

类似于王者中技能冷却时间。

/**
 *
 * @param {*} fn 是我们需要包装的事件回调
 * @param {*} wait 是每次推迟执行的等待时间
 */
const throttle = (fn, wait = 1500) => {
  let inThrottle, lastFn, lastTime;
  return function() {
    const context = this,
      args = arguments;
    if (!inThrottle) {
      fn.apply(context, args);
      lastTime = Date.now();
      inThrottle = true;
    } else {
      clearTimeout(lastFn);
      lastFn = setTimeout(function() {
        if (Date.now() - lastTime >= wait) {
          fn.apply(context, args);
          lastTime = Date.now();
        }
      }, Math.max(wait - (Date.now() - lastTime), 0));
    }
  };
};
export default throttle;
复制代码

防抖 debounce

在高频触发回调函数时，防抖操作使回调函数在一定时间间隔内，再次触发会清空定时器，并重新计时；计时结束后输出一次结果。

核心在于，在短时间内大量触发同一事件时，只会执行一次回调函数。避免把一次事件误认为多次。

/**
 *
 * @param {*} fn  是我们需要包装的事件回调
 * @param {*} delay 是每次推迟执行的等待时间
 */
const debounce = (fn, delay = 1000) => {
  // 定时器
  let timer = null;
  // 将debounce处理结果当作函数返回
  return function() {
    // 保留调用时的this上下文
    let context = this;
    // 保留调用时传入的参数
    let args = arguments;
    // 每次事件被触发时，都去清除之前的旧定时器
    if (timer) {
      clearTimeout(timer);
    }
    // 设立新定时器
    timer = setTimeout(function() {
      fn.apply(context, args);
    }, delay);
  };
};
export default debounce;
复制代码

常见使用场景

监听 scroll、mousemove 等事件 - 节流（每隔一秒计算一次位置）
监听浏览器窗口 resize 操作 - 防抖（只需计算一次）
键盘文本输入的验证 - 防抖（连续输入文字后发送请求进行验证，验证一次就好）
提交表单 - 防抖（多次点击变为一次）
search搜索联想，用户在不断输入值时，用防抖来节约请求资源。
登录、发短信等按钮避免用户点击太快，以致于发送了多次请求，需要防抖

节流、防抖有时用哪个都可以，比如监听页面滚动，可以节流（每个一段时间出发一次回调），也可以防抖（用户当前这次滚动结束出发，继续滚动等待下一次触发）

vue中使用

index.vue

<script>
	import debounce from "../utils/debounce";
        import throttle from "../utils/throttle";
	
	methods:{
		// 防抖方法
		change: debounce (function () {
			// 逻辑
		},1000)

		// 节流方法
		change: throttle(function () {
			// 逻辑
        },1000)
	}
</script>
复制代码

总结

函数防抖和函数节流都是防止某一时间频繁触发，但是这两兄弟之间的原理却不一样。
函数防抖是某一段时间内只执行一次，而函数节流是间隔时间执行。

代码示例