微信小程序防抖、节流的使用

1、节流函数的封装
在utils文件夹下新建utils.js文件,然后写入节流和防抖函数

const throttle=(fn,wait)=> {//节流
  var prev=Date.now();
  return function () {
    var context=this;
    var args=arguments;
    var now=Date.now();
    console.log(now-prev>wait)
    if(now-prev>wait){
      fn.apply(context,args)
      prev=Date.now()
    }
  }
}

2、防抖函数的封装

const debounce=(func, wait)=>{//防抖
  // wait:500ms;func:被频繁触发的事件
  let timeout;
  return function () {
    let context = this;
    let args = arguments;
    let later = () => {
      timeout = null;
      func.apply(context, args);
    };
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
  }
}

module.exports = {
  throttle, debounce
}

在.js页面引入并使用:

var utils=require('../../../utils/util');
Page({
btnNext:utils.debounce(function(e) {
    this.nextpage()
  },500),
  btnPrev:utils.debounce(function(e) {
    this.prevpage()
  },500),
})
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容