防抖与节流

m0_49471668

已于 2023-10-11 10:29:15 修改

阅读量75

点赞数

文章标签： javascript vue.js 前端

于 2022-03-13 22:21:53 首次发布

本文链接：https://blog.csdn.net/m0_49471668/article/details/123447840

版权

面试题专栏收录该内容

54 篇文章 1 订阅

订阅专栏

本文探讨了在开发中如何通过防抖(debounce)和节流(throttle)技术降低滚动事件和输入验证频率，提升用户体验。防抖确保多次触发仅执行最后一次，而节流则限制每段时间内只执行一次。实例展示了HTML和Vue中的实现方式。

摘要由CSDN通过智能技术生成

防抖（debounce):(多次变为最后一次执行)

节流（throttle）：（多次变为每隔一定时间执行一次）

在开发中，常常会去监听滚动事件或者用户输入框验证事件，如果事件处理没有频率限制，会加重浏览器的负担，影响用户体验感。

因此可以采取防抖(debounce)和节流（throttle）来处理，减少调用事件的频率，达到较好的用户体验。

防抖（debounce):(多次变为最后一次执行)

一：html中

在事件触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时，重新触发定时器


<body>
    <div class="box" id="container">
        <p>防抖演示</p>
        <p>防抖演示</p>
        <p>防抖演示</p>
        <p>防抖演示</p>
        <p>防抖演示</p>
        <p>防抖演示</p>
        <p>防抖演示</p>
        <p>防抖演示</p>
        <p>防抖演示</p>
    </div>
</body>
<script>
    function debounce(fn, wait) {
        var timeout = null; // 使用闭包，缓存变量
        return function () {
            if (timeout !== null) {
                console.log('清除定时器啦')
                clearTimeout(timeout); //清除这个定时器
            }
            timeout = setTimeout(fn, wait);
        }
    }
    // 处理函数
    function handle() {
        console.log('触发函数');
    }
    var container = document.getElementById('container')
    container.addEventListener('scroll', debounce(handle, 1000));
</script>

当连续触发scroll事件时，handle函数只会在1秒时间内执行，如果继续滚动执行，就会清除定时器.

二.在Vue中使用函数防抖实现输入框搜索

1.新建debounce.js

/**
 * 函数防抖
 */
export function debounce(fn, delay) {
  // 记录上一次的延时器
  var timer = null;
  var delay = delay || 200;
  return function() {
    var args = arguments;
    var that = this;
    // 清除上一次延时器
    clearTimeout(timer)
    timer = setTimeout(function() {
        fn.apply(that,args)
    }, delay);
  }
}

2.在vue组件中引用

import {debounce} from '@/utils/debounce.js

3.在组件中使用

<template>
  <div class="white-search-bar">
        <div class="search-bar-item">
          <span class="iconfont icon-search"></span>
          <input class="search-bar-input" type="text" placeholder="应用搜索" v-model="keyword" @keyup="appSearch">
        </div>
      </div>
</template>
<script>
import {debounce} from '@/utils/debounce.js'
export default {
  name: "debounce",
  data() {
    return {
    keyword:''
    };
  },
  methods: {
   appSearch:debounce(function(){
     console.log(11)
   })
  },
};
</script>

定义：在事件被触发n秒后再执行回调，如果在n秒内又被重新触发，则重新计时。

实现原理：函数防抖的基本思想是设置一个定时器，在指定时间间隔内运行代码时清除上一次的定时器，并设置另一个定时器，直到函数请求停止并超过时间间隔才会执行

使用场景：文本框输入搜索（连续输入谜面多次请求接口）

防抖：是只执行最后一次，

节流：是控制执行次数

节流（throttle）：（多次变为每隔一定时间执行一次）

定义：规定在一个单位时间内。只能触发一次函数，如果这个单位时间内触发多次函数，只有一次生效。典型案例：鼠标不断点击触发，规定n秒内多次点击只有一次生效

实现原理：用时间戳来判断是否已到回调该执行时间，记录上次执行的时间戳。然后每次触发scroll事件执行回调，回调中判断当前事件戳距离上次执行时间戳的间隔是否已经到达规定时间段，如果是，则执行，并更新上次执行的时间戳

使用场景：resize,scroll，提交表单，防止提交多次高频监听事件

function throttle(event, time) {
//定时器
  let timer = null;
  return function () {
    if (!timer) {
      timer = setTimeout(() => {
        //执行event方法
        event()
        //  和防抖不一样，把定时器计为空
        timer = null
      }, time)
    }
  }
}