Vue中防抖(debounce)、节流(throttle)的具体分析

今天咱们来说一下vue和uniapp的优化，这个防抖和节流已经是一个老生常谈的话题了

1、防抖(debounce)

在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时；典型的案例就是输入搜索：输入结束后n秒才进行搜索请求，n秒内又输入的内容，就重新计时。

通俗理解，就是我们在点击请求或者点击加载等过程中，只需要点击一次，但由于请求慢，点击了好多次，导致多次请求，防抖就是在点击了好多次之后的最后一次才会请求。

在一些搜索框输入内容时，会有好多联想词在下方显示出来，并不是输入框内容一改变就触随即弹出联想词的，是我们结束输入后，经过一段时间，才会触发。

代码

<template>
    <div>
        输入内容：<input type="text" class="input" @keyup="debounce" />
        <div> 输入次数：{{ num }}</div>
    </div>
</template>
<script setup>
import { ref } from 'vue'
const num = ref(0);
const debounce = function () {
    if (time) {
        clearTimeout(time)
    }
    time = setTimeout(function () {
        num.value++
        console.log('输入了' + num.value + '次')
        time = null;
    }, 2000)
}
</script>

这样连续按回车后，也只会触发一次输入，每次按回车间隔设置的两秒，才会触发一次。

所以，考虑到会出现连续点击了提交按钮，连续触摸的情况，防抖是很有必要的。

当然，也有另外的解决方式，比如项目里用的是控制按钮的方式，点击保存，在请求接口返回200之前，按钮禁止使用，这里就不会出现重复点击了。

2、节流(throttle)

规定在一个单位时间内，只能触发一次函数，如果这个单位时间内触发多次函数，只有一次生效，所以节流会稀释函数的执行频率；典型的案例就是鼠标不断点击触发，规定在n秒内多次点击只有一次生效。

场景应用：因为节流是监听到第一次触发事件后就执行，所以可以用来防止按钮多次点击执行多次，且按照第一次点击的事件为准

代码如下

<template>
    <div>
        <button @click="throttle">点击</button>
        <div>实际点击：{{ clicknumber }}</div>
        <div>有效点击：{{ num }}</div>
    </div>
</template>
<script setup>
import { ref } from 'vue'
let time
let lastTime
const num = ref(0);
const clicknumber = ref(0);
const throttle = function () {
    clicknumber.value++
    let now = new Date();
    if (lastTime && now - lastTime < 2000) {
        clearTimeout(time)
    }
    time = setTimeout(function () {
        num.value++
        console.log('点击了' + num.value + '次')
        lastTime = new Date()
    }, 500)
}
</script>

防抖和节流的操作其实很像，他们的区别就是防抖动是将多次执行变为最后一次执行，节流是将多次执行变成每隔一段时间执行。

3、封装

我们为了更好的去使用，我们可以进行封装，在 utils.js 文件里面加入下面的方法

// 防抖
export function _debounce(fn, wait = 500) {
  let timer;
    return function () {
      let context = this;
      let args = arguments;
      if (timer) clearTimeout(timer);
      timer = setTimeout(() => {
        fn.apply(context, args);
      }, wait)
    }
}
// 节流
export function _throttle(fn, wait = 200) {
  let last, timer,now;
  return function() {
    now = Date.now();
    if (last && now - last < wait) {
      clearTimeout(timer);
      timer = setTimeout(function() {
        last = now;
        fn.call(this, ...arguments);
      }, wait);
    } else {
      last = now;
      fn.call(this, ...arguments);
    }
  };
}

使用方法

import { _debounce, _throttle } from '@/utils/index';
initQuery: _throttle(function() {
     // 要做的事情
}, 2000)

initQuery: _debounce(function() {
     // 要做的事情
}, 2000)

以上这篇vue中防抖(debounce)、节流(throttle)的具体分析就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持芦苇派。