短视频软件开发,微信小程序如何防抖?

短视频软件开发,微信小程序如何防抖?
这里主要用到闭包,将函数内的值保存下来,下次点击的时候进入判断,如果定时器启动了,则清除定时器,直到最后一次启动定时器,也就是说,在规定的时间内只会触发最后一次定时器,从而达到防抖效果。

防抖的使用场景:

防止连续快速点击
防止滚动条触底时的频繁事件触发
方法一:

 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>

以上就是短视频软件开发,微信小程序如何防抖?, 更多内容欢迎关注之后的文章

posted @ 2025-07-05 10:53  云豹科技-苏凌霄  阅读(35)  评论(0)    收藏  举报