节流和防抖

函数防抖(debounce)

含义: 在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。

debounce 使用场景

• search搜索联想，用户在不断输入值时，用防抖来节约请求资源。
• window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次
• 频繁操作点赞和取消点赞，因此需要获取最后一次操作结果并发送给服务器

代码示例:

   <Input placeholder="搜索" onClick={this.debounce(this.handleSearch, 400)}/>
    /**
     * 防抖函数--异步搜索
     */
    private debounce = (fn: Function, delay: number = 500) => {
        let timeout = null;
        let _this = this;
        return function() {
            let args = arguments;
            clearTimeout(timeout);
            timeout = setTimeout(() => {
                fn.apply(_this, args);
            }, delay);
        };
    }

函数节流(throttle)

含义: 规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。

• throttle使用场景
• 鼠标不断点击触发，mousedown(单位时间内只触发一次)
• 监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断

代码示例:

    /**
     * 节流函数
     */
    private throttle = (fn: Function, delay: number = 500) => {
        let _this = this;
        let isRuning = false;
        return function () {
            let args = arguments;
            if (isRuning) {
                return;
            }
            isRuning = true;
            setTimeout(() => {
                isRuning = false;
                fn.apply(_this, args);
            }, delay);
        };
    }

总结：

函数防抖： 将多次操作合并为一次操作进行。原理是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，就会取消之前的计时器而重新设置。这样一来，只有最后一次操作能被触发。

函数节流： 使得一定时间内只触发一次函数。原理是通过判断是否有延迟调用函数未执行