【Vue】vue使用节流与防抖注意点

防抖+节流作用

• 防抖：
  • 作用：只运行最后一次调用
  • 例：2秒内调用了a函数100次。使用防抖后，第1-99次都不会调用a函数，只在第100次调用a函数。
  • 用作领域：登录、注册

---

• 节流：
  • 作用：减少触发次数
  • 例：监听浏览器滚动。一秒内触发10次监听函数，假如使用节流后，若节流延时设为为0.5秒，那么1秒内只触发2次监听函数。

代码

scr/utils/tools.js

// 防抖函数| f 要执行的函数 | deley 延时（毫秒）,默认100 | firstRun 第一次是否执行 true就是执行，默认false, // // // // // // // // // // // // // 
function debounce(f, deley = 100, firstRun = false) {
    let time666
    // 第一次是否执行
    if (firstRun === true) f();

    return (_, ...args) => {
        clearTimeout(time666)
        time666 = setTimeout(__ => f.apply(_, args), deley)
    }
};

// 节流 f-函数 deley-延时
function throttle(f, deley = 500) {
    let time = null; 

    return (_, ...args) => {
        if (time !== null) return

        time = setTimeout(() => {
            f.apply(_, args)
            time = null
        }, deley);
    }
}
 
export {
    debounce, 
    throttle
}

需求+调用防抖

需求

1. 频繁点击按钮时，只执行最后一次点击

错误调用

<template>
    <button @click="florCard.florClk1">调用1</button>
 	<button @click="debounce(lorCard.florClk2,1200)">调用2</button> 
	<button @click="debounce(lorCard.florClk3,1200)">调用3</button> 
</template>

<script setup> 
import { debounce } from '@/utils/tools'

const florCard = {  
	//错误 1
     florClk1() {
        debounce(() => console.log(1))
   	 },
   	 
     //错误 2
    florClk2: function() {
     	 console.log(1);
    },
	
	// 错误 3
	  florClk3() {
          console.log(1);
     },
}
</script>

正确调用

必须定义一个变量接收防抖/节流返回的函数，如下防抖 常量

src/views/homeView.vue

<template>
    <button @click="防抖(1, 2, 3)">按钮1111</button> 
</template>

<script setup>
import { debounce } from '@/utils/tools'

const a = _ => console.log(_)

/** 
 * a - 调用的函数
 * 定义一个变量、变量存储防抖函数的返回值
 * 注：防抖函数返回的是一个函数，所以，防抖常量存储的是个函数
 */
const 防抖 = debounce(a，1000)  
</script>

注意点

防抖+节流注意点
vue事件中使用防抖/节流时，需调用防抖/节流返回的函数 。并非直接调用debounce、throttle 函数
节流+防抖原理是返回一个函数，并调用返回的这个函数，达到防抖+节流效果

• 上面错误的调用方法，
  1. 因为调用一个普通函数，再调用防抖/节流，此时防抖/节流返回一个函数，但未调用防抖/节流返回的函数，没有达到防抖/节流效果
  2. 在防抖、节流函数后面加个小括号，是调用到防抖、节流了。但，每次点击按钮时都会不停触发防抖、节流，最终也没有达到防抖、节流效果。

End

---

2023/3/12 辑

---

2023/3/15 一改

---

2023/4/21 19:55 2改