关于微信小程序:微信小程序防抖

2次阅读

共计 892 个字符,预计需要花费 3 分钟才能阅读完成。

微信小程序闭包 - 防抖

这里次要用到闭包,将函数内的值保留下来,下次点击的时候进入判断,如果定时器启动了,则革除定时器,直到最初一次启动定时器,也就是说,在规定的工夫内只会触发最初一次定时器,从而达到防抖成果。

防抖的应用场景:

  • 避免间断疾速点击
  • 避免滚动条触底时的频繁事件触发

办法一:

 data: {name : null},
  time : null,

  // 滚动条触底
  scrollLower(){console.log('触底',this.time);
    clearTimeout(this.time) 
    this.time = setTimeout(()=>{console.log('防抖',this.time);  
    },1000)
  },

办法二:

  // 滚动条触底
  scrollLower(){this.light()  // 如果要携带参数在这
 
  },
  
  light : (function() {
      let i = null
     console.log('触底',i);
      return function() {   // 接管携带的参数在这
          if(i != null) clearTimeout(i)
          i = setTimeout(()=>{console.log('防抖',i);
          },1000)
      }
  })(),

微信小程序外层不反对 const fn = function() 这种语法 ,所以这里只能以对象的模式定义函数:fn : function(){}


js 闭包

    <button id="attick"> 点击 </button>

    <script>
        let attick = document.getElementById('attick')
        attick.addEventListener('click',function(){light()
        })
          // 点击
          const light = (function() {
            let i = null
           console.log('点击',i);
            return function() {if(i != null) clearTimeout(i)   // 革除定时器
                i = setTimeout(()=>{console.log('点击 000',i);  // 1s 内无操作才会触发且只触发最初一次
                },1000)
            }
        })()
    </script>
正文完
 0