JavaScript防抖节流

ymktchic

发布于 2022-01-18 17:21:03

4920

发布于 2022-01-18 17:21:03

文章被收录于专栏：ymktchicymktchic

闭包

父函数中，返回的子函数

    var str= '我是大帅哥'
 var OBJ= {
       str:'hello world',
       getData:function(){

           return function(){
               return this.str
           }
       }
 }
console.log(OBJ.getData()())

输出结果为： 我是大帅哥

原因： this的指向是，由它所在函数调用的上下文决定的，而不是由它所在函数定义的上下文决定的。function fn(){} 箭头函数()=>{}中的this，是由它所在函数定义的上下文决定的。

function fn1{}{
let n=123;
return function(){
console.log(n)
}
}
let f1=fu1{}
f1{}

f1保存的是return function(){console.log(n)}这个匿名函数所在堆地址的引用，并不是赋值。

函数防抖

函数防抖（debounce）：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。

<body>
    <input type="text" name="" id="">
    <input type="submit" name="" id="input">

    <script>
   var btn =document.getElementById('input')
   btn.addEventListener('click',debounce(submit,2000),false)/
        
   function submit(){

    console.log(11)

   }
   function debounce(fn,timer){
    var t =null
    
       return function btnevent(){
       var firstClick =!t
        if(t){clearTimeout(t)}

            if(firstClick){
            fn.apply(this,arguments)}

            t= setTimeout(()=>{
                t=null;
          
            },timer)
       }
   }
    </script>
</body>

节流

函数节流（throttle）：当持续触发事件时，保证一定时间段内只调用一次事件处理函数。节流通俗解释就比如我们水龙头放水，阀门一打开，水哗哗的往下流，秉着勤俭节约的优良传统美德，我们要把水龙头关小点，最好是如我们心意按照一定规律在某个时间间隔内一滴一滴的往下滴。

通过设置时间戳

<body>
    <input type="text" name="" id="">
    <input type="submit" name="" id="input">
    <script>
  var btn =document.getElementById('input')
  btn.addEventListener('click',throttle(submit,2000),false)
  function submit(){
      console.log(this)
  }
  function throttle(fn,delay){
    var begin = 0
    return function(){
            var cur = new Date().getTime()
            if(cur - begin > delay){
        fn.apply(this,arguments);
                begin=cur;
    }
    }
  }
    </script>
</body>