防抖和节流

防抖和节流在前端应用中都是优化项目的手段，减少事件短时间触发的频率。

一、防抖

在前端项目，为防止用户快速频繁的触发执行同一个事件，提出防抖的概念。

在规定时间范围内，再点击一次会使得重新计算时间，触发了之后，只有在这段时间没有再触发，才执行。

一段时间内连续触发事件，只执行最后一次。

使用定时器来实现，如下：

function debounce(fn,wait){
            let timeout;
            return function(){
                let _this = this;
                let args = arguments;
                if(timeout) clearTimeout(timeout);
                timeout = setTimeout(()=>{
                    fn.apply(_this,args);
                },wait);
            }
        }

通过设置第三个参数来决定当页面第一次加载时是否随即等待设置时间后立即执行。

function debounce(fn, wait, immediate) {
            let timeout;
            return function () {
                let _this = this;
                let args = arguments;
                if (timeout) clearTimeout(timeout);
                if (immediate) {
                    let callback = !timeout;
                    timeout = setTimeout(() => {
                        timeout = null;
                    }, wait);
                    if (callback) fn.apply(_this, args);
                }else{
                    timeout = setTimeout(()=>{
                        fn.apply(_this,args);
                    },wait);
                }
            }
        }

防抖实践运用场景：

1. 按钮重复点击，只响应最后一次点击发起请求

2. input输入框，输入数据结束后才进行校验工作

二、节流

在前端项目，为防止同一段时间内多次触发事件，提出节流的概念。

在一段时间内只能触发一次，即n秒内只运行一次。若在n秒内重复触发，实际只有一次生效。

在一段事件内，只触发一次。

可以通过定时器或通过时间标记来实现，具体实现如下：

1. 定时器实现。一段时间内最后触发

function throttle(func,wait){
            let timer;
            return function(){
                let _this = this;
                let args = arguments;
                if(!timer){
                    timer = setTimeout(()=>{
                        timer = null;
                        func.apply(_this,args);
                    },wait)
                }
            }
        }

2. 时间标记。基于计算当前触发时间和前一次触发时间的相隔时间实现

function throttle(func,wait){
            let previous = 0;
            return function(){
                let _this = this;
                let args = arguments;
                let now = Date.now();
                if(now - previous > wait){
                    func.apply(_this,args);
                    previous = now;
                }
            }
        }

节流实践运用场景：

1. 高频事件。如resize或scroll

2. 获取验证码