JavaScript——防抖&节流

防抖和节流是防止高频率触发的事件

防抖,一般用在使用

onresize事件(onresize:当浏览器被重置大小时执行Javascript代码)

oninput事件:在用户输入时触发

如果事件进行高频率触发,很可能会导致服务器崩溃

那么就可以使用函数防抖进行优化,比如你乘坐电梯,如果十秒钟之内有人进入或者出去,那么十秒钟就会重新开始计时,直到十秒之内都不在有人流动才会关门

那么节流就不一样了:同样是电梯十秒运作,电梯的机制是当人进入电梯 后,十秒钟内自动关门,这十秒钟内人可以进出,当到了十秒钟后,不管你有没有人进入出去都直接关门,准时运作。

函数节流简单理解

每隔一段时间执行一次

函数防抖简单理解

每当事件触发一次,就会重置定时器,一直到最后一次触发事件,再去执行

防抖一般用于触发input事件

例如:


    请输入信息:
    

效果如下:

我们在输入文字时,每次输入都会发送请求,这样中间的很多东西没有必要给后端,给了的话对服务器的压力非常大,那么在这里可以使用函数防抖来进行优化 





    
    
    
    Document


    
    


进行优化过后:




    
    
    
    防抖优化


    请输入信息:
    

 效果如下图所示:

 节流

原理:规定一个时间,在这个时间段内的所有事件都会一起被执行

一般用于:resizetouchmove移动DOM,上拉列表加载数据等

例如:




    
    
    
    Document


    
    

效果为每个一秒节流一次 

详情

扩展例子如下:


    
加入节流-定时器 & 时间戳:

JavaScript——防抖&节流_第1张图片

你可能感兴趣的:(JavaScript,javascript,html,es6,ajax)