码迷,mamicode.com
首页 > 其他好文 > 详细

节流 防抖

时间:2019-08-10 11:30:32      阅读:59      评论:0      收藏:0      [点我收藏+]

标签:pre   的区别   触发事件   out   strong   事件处理   OLE   发送   script   

什么是节流?

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

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

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

    

 

什么是防抖?

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

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

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

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

 

节流 防抖

标签:pre   的区别   触发事件   out   strong   事件处理   OLE   发送   script   

原文地址:https://www.cnblogs.com/javascript9527/p/11330906.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!