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

恩神

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

阅读量871

点赞数 4

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

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

本文链接：https://blog.csdn.net/essnbb/article/details/125508244

版权

微信小程序专栏收录该内容

1 篇文章 0 订阅

订阅专栏

下面代码实现：

//声明一个变量用来清除定时器
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.getlist()
    }
  },

js防抖节流逻辑(逻辑都是一样的)

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 
<body>
    <div class="demo">
    <button onclick="add()">点击刷新</button>
    </div>
</body>
 
</html>
<script>
    //防抖节流逻辑
    var time=''
 
    function fn() {
        console.log(123);
    }
 
      //规定时间内只执行一次
    function add() {
        clearTimeout(time)
       time= setTimeout(() => {
           fn()
        }, 1000)
    }
 
 
 
</script>