谈谈前端项目优化中的防抖和节流（JS、VUE）

所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。
当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时
如 登录 和 搜索 在一定时间段的连续函数调用，只让其执行一次
我们来看一个代码例子：

//防抖
/*在某些需求中，有一些事件会持续触发，会造成页面颤动的情况，
我们可以通过延迟的方式去对抖动进行处理*/
 function fd(fn,date){
     var time = null;//定时器
     return function(){
         if(time)//下拉时，如果有之前未执行的定时器
             clearTimeout(time)//清掉不要
         time = setTimeout(fn, date);//创建一个新的定时器
    }
 }
 function getscroll(){
    console.log(document.documentElement.scrollTop);
}
window.onscroll = fd(getscroll,1000);

所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率。
如 下拉刷新 让一个函数不要执行得太频繁，减少一些过快的调用来节流
我们来看一个代码例子：

//节流
 /*在一段时间内，事件在触发时，只获取第一次执行的结果*/
function jl(fn,date){
    var state = true;
    return function(){
        //如果不在服务状态 什么也不做
        if(!state)
            return false
        state = false;//在这一秒内不重复工作
        setTimeout(function(){
            fn();
            state = true;
        }, date);
    }
}
function getscroll(){
    console.log(document.documentElement.scrollTop);
}
window.onscroll = jl(getscroll,1000);