节流 防抖

Posted 2022-06-26 javascript9527

什么是节流？

　　 阻止一个函数在短时间内的连续调用。　　

　　 比如：设置一个按钮，去请求服务器，如果不设置节流，就可以无限点击获取，点一次触发一次函数。

　　 比如 后边的例子     ：   一个函数每三秒才可以执行一次函数，三秒之内点击事件不会执行函数。

　　　 

 

什么是防抖？

　　当触发事件的时候，一定时间段内没有再触发事件，事件处理函数才会执行一次。如果设定的时间到来之前，又一次触发事件，就会重新开延时。

　　将几次操作合并为一次操作进行

　　函数防抖，就像法师放技能的时候，需要读条，只有读完才能放出技能。      如果 技能条没有读完，再按技能又会重新读条。

　　常用防抖的事件：   scroll鼠标滚动事件  

 

防抖和节流的区别？

　　函数节流：不管事件触发有多频繁，都会在规定的时间内执行一次函数。

　　函数防抖： 只会在最后一次触发事件的时候，才会执行一次函数。

 

 

函数节流原理：

　　设置一个开关变量，当开关为ture的时候可以执行，发送请求后，将开关设置为false，然后设置一个定时器，当接收到返回的数据后，再打开开关；

    <button id="btn">发送请求</button>
    <script>
    var canClick=true  //设置一个开关
    btn.onclick=function()
    if(canClick) //如果开关是开着的，说明可以单击
    canClick=false     //先关闭开关  再发送请求
    console.log("发送ajax请求")
    setTimeout(function()  //设置定时器，接收到请求后，在定时器末尾打开开关
    console.log("完成")
    canClick=true
    ,3000);
    
    
    </script>
//这个函数  每3秒可以发送一次请求

 

函数防抖原理

　使用定时器setTimeout做防抖。当鼠标滚动触发事件的时候，先用setTimeout延时一段时间再执行，如果在延时的这段时间内又触发了函数，就clearTimeout原来的定时器，

再setTimeout一个定时器重复以上流程。

    <script>
        var timer; 
        window.onscroll=function()
        if(timer) 
        clearTimeout(timer)
        
        timer=setTimeout(function() 
        console.log(‘发送ajax请求，加载跟多数据‘)
        ,500)
        
　　</script>