函数节流和函数防抖

防抖函数

触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。

function debounce(method, delay) {
    return function() {
        let context = this,
            args = arguments;

        clearTimeout(method.id);

        method.id = setTimeout(function() {
            method.call(context, args);
        }, delay);
    }
}

节流函数

高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率。

function throttle(menthod, delay, duration) {
    let timer = null;
    let begin = new Date();
    return function() {
        let context = this,
            args = arguments;
        let current = new Date();

        clearTimeout(timer);

        if(current - begin >= duration) {
            method.apply(context, args);
            begin = current;
        } else {
            timer = setTimeout(function() {
                method.apply(context, args);
                begin = current;
            }, duration);
        }
    }
}

应用

<template>
    <div>
        <input @change="inputSearch"></input>
    </div>
</template>

<script>
    export default {
        mounted() {
            this.searchHandle = throttle(() => this.queryList(), 50, 200);
        },
        methods: {
            queryList() {
                // 请求接口
            },
            inputSearch(data) {
                this.keyword = data.value;
                this.searchHandle();
            },
        } 
    }
</script>

小结

• 相同点：

  • 都可以通过使用 setTimeout 实现。
  • 目的都是，降低回调执行频率。节省计算资源。

• 不同点：

  • 函数防抖，在一段连续操作结束后，处理回调，利用clearTimeout 和 setTimeout实现。函数节流，在一段连续操作中，每一段时间只执行一次，频率较高的事件中使用来提高性能。
  • 函数防抖关注一定时间连续触发的事件只在最后执行一次，而函数节流侧重于一段时间内只执行一次。