微信小程序的（防抖,节流）,解决用户一直下拉刷新请求或一直点击按钮提交信息等；获取列表信息,实现刷新数据功能

恩神

已于 2022-09-07 15:37:37 修改

阅读量1k

点赞数 4

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签：微信小程序 javascript

于 2022-06-28 19:36:37 首次发布

本文链接：https://blog.youkuaiyun.com/essnbb/article/details/125508244

本文介绍了如何在微信小程序中使用JavaScript实现防抖和节流技术，以应对用户持续下拉刷新或频繁点击按钮提交信息的情况。通过这些技术，可以有效地控制请求频率，避免过度刷新数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下面代码实现：

//声明一个变量用来清除定时器
var times='',

初始化数据，我是获取到要遍历在页面的
 data: {
    arr: [],
    ye: 1,
    tiao: 10
  },

 //页面刷新获取信息
  onLoad(options) {
    this.getlist()
  },

//下拉刷新数据，回到前10条数据
  onPullDownRefresh() {
    clearTimeout(times) //清除定时器，解决一直下拉问题，防抖！
    times = setTimeout(() => {  
      this.setData({  
        tiao: 10
      })
      this.getlist()
    }, 2000) 
  },



//获取列表
  getlist() {
    var obj = {
      page: this.data.ye,
      pagelimit: this.data.tiao,
    }
    $api.getxiala(obj).then(res => {
      this.setData({
        arr: res.data.data.data,
      })
    })
  },



//上拉刷新列表数据，每次更新10条，小程序自带的页面上拉触底事件的处理函数！
 onReachBottom() {
    if (this.data.tiao >= 24) { //如果已经拉到底部，可以提示一条信息
      this.setData({
        arr: [{
          id: "滚犊子",
          title: "已经刷完了",
          dec: "下拉刷新数据",
          num: "滚"
        }]
      })
    } else {
      this.setData({
        tiao: this.data.tiao + 10
      })
      this