防抖和节流

1.防抖
含义：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间；
效果：短时间内大量触发同一个事件，只会执行一次；
应用场景：debounce
search搜索联想，用户在不断输入值时，用防抖来节约请求资源。
频繁操作点赞和取消点赞，因此需要获取最后一次操作结果并发送给服务器
实现的思路：每次触发事件时都取消之前的延时调用方法

click() {
            clearTimeout(this.timer);
            this.timer = setTimeout(() => {
                console.log('鼠标单击');
            }, 200);
        }
}

2.节流
含义：在单位时间内, 只会触发一次事件，如果事件触发后，又重复触发了同一事件，则忽略后面触发的事件，直到第一次事件的计时结束；
效果：
应用场景：throttle
鼠标不断点击触发，mousedown(单位时间内只触发一次)
window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次
实现思路：每次触发事件时都判断当前是否有等待执行的延时函数：

 click() {
            if (this.isFinshed === true) {
                this.isFinshed = false;

                this.timer = setTimeout(() => {
                    console.log('鼠标单击');
                    this.isFinshed = true;
                }, 200);
            }
        }