防抖与节流区别以及使用场景

另附内容：

Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。
_.debounce(func, [wait=0], [options=])
如何使用
引入
import _ from 'lodash';
methods中clicktest方法

clicktest:_.debounce(function(){
      console.log('政哥哥过过过过过')
},1000),

_.throttle(func, [wait=0], [options=])

原网址：https://segmentfault.com/a/1190000018445196
目的：当多次执行某一动作，进行函数调用次数的限制，节省资源
防抖：在事件触发n秒后执行函数，如果在n秒内再次出发，重新计时
节流：当多次执行某一动作，每个一段时间，只执行一次函数。
防抖函数（普通）

var timer; //全局的timer，只有一个
function debounce(fn,delay){
    if(timer){
        clearTimeout(timer) //保证只开启一个定时器
    }
    timer = setTimeout(function(){
        fn(); //延迟delay，执行函数
    },delay)
}
window.onscroll = function(){
    debounce(test,1000)
}
function test(){
    console.log('滚动停')
}

需要将timer封装到debounce中，如果调用的fn有参数需要处理

function debounce(fn,delay){
    let timer;
    return function(){
        let _this = this; //为了改写参数 保存this 应用apply
        let _args = arguments; //保存testDebounceFn的入参
        if(timer){
            clearTimeout(timer);
        }
        timer = setTimeout(function(){
            //apply传参正好和arguments匹配
            fn.apply(_this,_args)
        },delay)
    }
}
let testDebounceFn = debounce(test,1000);
function test(a){
    console.log('滚动停 '+a)
}
window.onscroll = function(){
    testDebounceFn('aaaa')
}

节流（2种方式setTimeout 或者 new Date()）
//防抖比节流严格，防抖在一定时间操作后只执行一次。节流在一定时间操作，可每隔n秒执行一次
setTimeout方式

function throttle(fn,delay){
    let timer;
    return function(){
        let _args = arguments;
        let _this = this;
        if(timer){//如果有定时器，退出
            return
        }
        timer = setTimeout(function(){
            fn.apply(_this,_args);//定时器结束执行函数
            timer = null;//清除定时器，可以再次进入
        },delay)
    }
}
let testThrottleFn = throttle(test,3000);
function test(a){
    console.log('打印 '+a)
}
window.onscroll = function(){
    testThrottleFn('bbbb')
}

new Date方式

function throttle(fn,delay){
    let previous = 0;
    return function(){
        let _this = this;
        let _argus = arguments;
        let now = new Date();
        //不同时间取值的new Date()是可以相减的
        if(now-previous>delay){
            fn.apply(_this,_argus);
            previous = now;
        }
    }
}
let testThrottleFn = throttle(test,2000);
function test(b){
    console.log('出现 '+b)
}
window.onscroll = function(){
    testThrottleFn('8888')
}

函数防抖的应用场景

连续的事件，只需触发一次回调的场景有：

搜索框搜索输入。只需用户最后一次输入完，再发送请求
手机号、邮箱验证输入检测(change、input、blur、keyup等事件触发，每次键入都会触发)
窗口大小Resize。只需窗口调整完成后，计算窗口大小。防止重复渲染。
鼠标的mousemove、mouseover
导航条上，用户不停的在导航区域滑动相当于

函数节流的应用场景

间隔一段时间执行一次回调的场景有：

滚动加载，加载更多或滚到底部监听，window.onscroll和滑到底部自动加载更多
谷歌搜索框，搜索联想功能
高频点击提交，表单重复提交