浅谈vue中使⽤防抖与节流

⼀、防抖
防抖(debounce):触发⾼频事件后 n 秒内函数只会执⾏⼀次,如果 n 秒内⾼频事件再次被触发,则重新计算时间。
　　使⽤场景：频繁触发、输⼊框搜索等。
　　具体⽅法如下：

export const debounce = (fn, t) => {
    let delay = t || 500;
    let timer;
returnfunction() {
        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;
returnfunction() {
        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>

四、区别:防抖动是将多次执⾏变为最后⼀次执⾏,节流是将多次
执⾏变成每隔⼀段时间执⾏