淺談vue中使用防抖與節流

一、防抖

　　防抖(debounce):觸發高頻事件后 n 秒內函數只會執行一次,如果 n 秒內高頻事件再次被觸發,則重新計算時間。

　　使用場景：頻繁觸發、輸入框搜索等。

　　具體方法如下：

export const debounce = (fn, t) => {
    let delay = t || 500;
    let timer;
    return function() {
        let args = arguments;
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(() => {
            timer = null;
            fn.apply(this, args);
        }, delay);
    };
};

　

二、節流

　　節流(thorttle)：高頻事件觸發,但在 n 秒內只會執行一次,所以節流會稀釋函數的執行頻率。

　　使用場景：使用場景：頻繁觸發、onrize，onscroll滾動條，搶購按鈕高頻點擊。

export const Throttle = (fn, t) => {
    let last;
    let timer;
    let interval = t || 500;
    return function() {
        let args = arguments;
        let now = + new Date();
        if (last && now - last < interval) {
            clearTimeout(timer);
            timer = setTimeout(() => {
                last = now;
                fn.apply(this, args);
            }, interval);
        } else {
            last = now;
            fn.apply(this, args);
        }
    };
};

三、實現案例

<template>
    <div>
        <div>防抖</div>
        <input type='text' @keydown="hangleChange">
        <div>{{value}}</div>
        <div>節流</div>
        <input type='text' @keydown="hangleChange1">
        <div>{{value1}}</div>
    </div>
</template>

<script>
    import { debounce,Throttle } from '@/plugins/debounceThorttle.js'
    export default {
        name: 'test',
        data() {
            return {
                value: '',
                value1: ''
            }
        },
        methods: {
            hangleChange: debounce(function(e){
                this.value = e.target.value
            }),
            hangleChange1: Throttle(function(e) {
                this.value1 = e.target.value
            })
        }
    }
</script>

<style>
</style>

四、區別:防抖動是將多次執行變為最后一次執行,節流是將多次執行變成每隔一段時間執行。