throttle & debounce节流防抖

按需引入

如果未做全局配置，可以按需引入:

节流

// 引入
import { throttle } from '@/node_modules/fusions-ui/libs/function/applyEvent.js';

// 调用
throttle(() => {
    console.log('触发节流');
});

防抖

// 引入
import { debounce } from '@/node_modules/fusions-ui/libs/function/applyEvent.js';

// 调用
debounce(() => {
    console.log('触发防抖');
});

什么是节流和防抖？

• 节流

  节流的意思是，规定时间内，只触发一次，例：规定时间为300ms，在这个时间内，无论点击按钮多少次，它都只会触发一次，具体场景如：限时抢购、秒杀活动等需要控制时间触发频率场景，由于有无数人快速点击按钮，如果每次点击都发送请求，会造成服务器压力过大，因此需要限制频率，减少请求次数，节流可以有效的控制请求频率。

• 防抖

  防抖的意思是：在连续的操作中，无论进行了多长的时间，只有某一次的操作在指定的时间内没有再操作，这一次才会被判定有效，具体场景如：搜索输入关键字的过程中实时请求服务器匹配结果，如果不进行处理，那么就是输入框内容一直变化，导致一直向服务器发送请求，造成服务器压力过大，因此需要在输入框输入结束后，等待一段时间（比如300ms），再向服务器发送请求，防抖可以有效的控制请求频率。

温馨提示

fusions-ui内置的按钮组件 fu-button 内部已做节流和防抖处理，无需外部再做节流和防抖处理，配置 scene 属性为 throttle 或 debounce 即可。可以通过 blockTime 属性设置节流或防抖的时间。详见Button 按钮

节流

throttle(func, wait = 500, immediate = true)

规定时间内，只触发一次，可以通过 immediate 属性设置来决定触发的时机在这个时间的开始，还是结束的时候执行。

• func 触发回调要执行的函数
• wait 触发间隔时间，单位ms，默认为 500
• immediate 在开始还是结束触发，如：设置 wait 为1500ms，如果在1.5秒内触发了5次，只触发一次，如果 immediate 为 true，那么就会在第一次操作触发回调，如果 immediate 为 false，那么就会在第5次操作触发回调。

<template>
    <fu-button @click="handleClick">点击触发防抖</fu-button>
</template>

<script setup>
    // methods方法
    // 方式一
    // const handleClick = () => {
    //     uni.$fu.throttle(() => {
    //         console.log('触发节流')
    //     }, 1000, true)
    // };

    // 方式二
    const handleClick = () => {
        uni.$fu.throttle(nextClick(), 1000, true)
    };

    const nextClick = () => {
        console.log('触发节流')
    };

    // 以上两种方式都可以触发节流
</script>

防抖

debounce(func, wait = 500, immediate = false)

在连续的操作中，无论进行了多长的时间，只有某一次的操作在指定的时间内没有再操作，这一次才会被判定有效

• func 触发回调要执行的函数
• wait 触发间隔时间，单位ms，默认为 500
• immediate 在开始还是结束触发，如非特殊情况下，一般默认为 false 即可。

<template>
    <fu-button @click="handleClick">点击触发防抖</fu-button>
</template>

<script setup>
    // methods方法
    // 方式一
    // const handleClick = () => {
    //     uni.$fu.debounce(() => {
    //         console.log('触发防抖')
    //     }, 1000)
    // };

    // 方式二
    const handleClick = () => {
        uni.$fu.debounce(nextClick(), 1000)
    };

    const nextClick = () => {
        console.log('触发防抖')
    };

    // 以上两种方式都可以触发防抖
</script>