函数防抖节流

什么是函数节流？什么是函数防抖？

函数节流

一次函数执行一次后，只有大于设定的执行周期后才会执行第二次

有个需要频繁触发的函数，处于优化性能角度，在规定时间内，只让函数触发的第一次生效，后面不生效

节流函数写法

fn:要被节流的函数 delay:规定时间

function throttle(fn,delay){
    //记录上一次函数触发的时间
    var lastTime = 0;
    return function(){
        //记录当前函数触发的时间
        var nowTime = Date.now()
        if(nowTime - lastTime > delay){
            fn.call(this);
            //同布时间
            lastTime = nowTime;
        }
    }
}
document.onscroll = throttle(function(){
    console.log('scroll事件被触发了'+Date.now())
},200)

通过闭包的方式，引用lastTime变量

上一次时间减去下一次时间大于两百浩渺的的时候才会被触发一次

通过节流函数，可以极大的减少函数调用的次数，从而节约性能，优化性能

思路：通过定义函数，用闭包的方式记录上一次触发的时间，返回一个新的函数，获取当前触发时间，当前触发时间减去上一次触发时间大于传入的延迟时间时，才会执行函数，函数结束后，同步上一次触发时间。过程中嵌套多层函数涉及到this指向性问题，通过call函数将当前this指向到函数中，修正了this指向问题。

防抖函数

一个需要频繁出发的函数，在规定时间内，只让最后一次生效，前面的不生效

function debounce(fn,delay){
    //记录上一次延时器
    var timer = null;
    return functin(){
        //清除上一次延时器
        clearTimeout(timer)
        //重新设置新的延时器
        timer = setTimeout(function (){
            fn.apply(this);
        },delay);
    }
}

为了达到延迟最后一次生效，通常情况下会设置一个延时器，setTimeout

限制ajax请求的数量

概念及问题

认识防抖和节流 :

通过防抖和节流来限制事件频繁的发生

为什么需要防抖 ?

防抖的操作：只有在某个时间内，没有再次触发某个函数时，才真正的调用这个函数；

理解一下它的过程；

• 当事件触发时，相应的函数并不会立即触发，而是会等待一定的时间；

• 当事件密集触发时，函数的触发会被频繁的推迟；

• 只有等待了一段时间也没有事件触发，才会真正的执行响应函数；

防抖的应用场景很多：

输入框中频繁的输入内容，搜索或者提交信息；

频繁的点击按钮，触发某个事件；

监听浏览器滚动事件，完成某些特定操作；

用户缩放浏览器的resize事件；

总之，密集的事件触发，我们只希望触发比较靠后发生的事件，就可以使用防抖函数；

为什么需要节流?

节流的操作：在某个时间内（比如500ms），某个函数只能被触发一次；

举例子 :

在飞机大战的游戏中，我们按下空格会发射一个子弹：

很多飞机大战的游戏中会有这样的设定，即使按下的频率非常快，子弹也会保持一定的频率来发射；（其实很多的街机游戏都是这样的，普通攻击有一个最高的频率）；

比如1秒钟只能发射一次，即使用户在这1秒钟按下了10次，子弹会保持发射一颗的频率来发射；

但是事件是触发了10次的，响应的函数只触发了一次；

节流的应用场景：

监听页面的滚动事件；

鼠标移动事件；

用户频繁点击按钮操作；

游戏中的一些设计；

总之，依然是密集的事件触发，但是这次密集事件触发的过程，不会等待最后一次才进行函数调用，而是会按照一定的频率进行调用；