vue中防抖，節流的使用

函數防抖（debounce）：當持續觸發事件時，一定時間段內沒有再觸發事件，事件處理函數才會執行一次，如果設定的時間到來之前，又一次觸發了事件，就重新開始延時。

函數節流（throttle）：當持續觸發事件時，保證一定時間段內只調用一次事件處理函數。

/**
 * @desc 函數防抖
 * @param fn 函數
 * @param delay 延遲執行毫秒數 默認0.5s
 */
export function debounce(fn, delay) {
    var delay = delay || 500;
    var timer;
    return function () {
            console.log('調用了debounce方法')
            let args = arguments;
            if(timer){
                    clearTimeout(timer);
            }
            timer = setTimeout(() => {
                    timer = null;
                    fn.apply(this, args);
            }, delay);
    }
}

/**
 * @desc 函數節流
 * @param fn 函數
 * @param interval 函數執行間隔時間毫秒數 默認1s
 */
export function throttle(fn, interval) {
    var last;
    var timer;
    var interval = interval || 1000;
    return function () {
            console.log('調用了throttle方法')
        var th = this;
        var args = arguments;
        var now = +new Date();
        if (last && now - last < interval) {
            clearTimeout(timer);
            timer = setTimeout(function () {
                last = now;
                fn.apply(th, args);
            }, interval);
        } else {
            last = now;
            fn.apply(th, args);
        }
    }
}

在vue文件中使用：

<template>
    <view>
        <text @tap="clickDebounce()">防抖</text>
        <text @tap="clickThrottle()">節流</text>
    </view>
</template>

<script>
    import { debounce, throttle } from '@/utils/index.js'
    export default {
        data() {
            return {
                num: 0
            }
        },
        methods: {
            // 防抖
            clickDebounce: debounce(function() {
                this.num += 1
                console.log('第' + this.num +'次點擊' )
            }, 600),
            // 節流
            clickThrottle: throttle(function() {
                this.num += 1
                console.log('第' + this.num +'次點擊' )
            }, 800)
        }
    }
</script>

運行結果：