节流防抖

什么是节流？

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

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

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

什么是防抖？

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

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

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

　　常用防抖的事件： 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>

节流 防抖

猜你喜欢