当前位置：网站首页>Wechat applet (anti shake, throttling), which solves the problem that users keep pulling down refresh requests or clicking buttons to submit information; Get the list information and refresh the data

Wechat applet (anti shake, throttling), which solves the problem that users keep pulling down refresh requests or clicking buttons to submit information; Get the list information and refresh the data

2022-07-25 22:13:00 【Grace God】

The following code is implemented ：

// Declare a variable to clear the timer 
var times='',

 Initialization data , I got to traverse the page 
 data: {
    arr: [],
    ye: 1,
    tiao: 10
  },

 // Page refresh to get information 
  onLoad(options) {
    this.getlist()
  },

// Drop down to refresh data , Back before 10 Data 
  onPullDownRefresh() {
    clearInterval(times) // Clear timer , Solve the drop-down problem , Shake proof ！
    times = setInterval(() => {  
      this.setData({  
        tiao: 10
      })
      this.getlist()
    }, 2000) 
  },



// To obtain a list of 
  getlist() {
    var obj = {
      page: this.data.ye,
      pagelimit: this.data.tiao,
    }
    $api.getxiala(obj).then(res => {
      this.setData({
        arr: res.data.data.data,
      })
    })
  },



// Pull up to refresh the list data , Each update 10 strip , The handler of the bottom pull event on the page of the applet ！
 onReachBottom() {
    if (this.data.tiao >= 24) { // If it has been pulled to the bottom , You can prompt a message 
      this.setData({
        arr: [{
          id: " Roll came ",
          title: " It's finished ",
          dec: " Drop down to refresh data ",
          num: " roll "
        }]
      })
    } else {
      this.setData({
        tiao: this.data.tiao + 10
      })
      this.getlist()
    }
  },

js Anti shake throttling logic ( The logic is the same )

<!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()"> Click refresh </button>
    </div>
</body>

</html>
<script>
    // Anti shake throttling logic 
    var time=''

    function fn() {
        console.log(123);
    }

      // Only perform once within the specified time 
    function add() {
        clearInterval(time)
       time= setInterval(() => {
            this.fn()
        }, 1000)
    }

 

</script>

原网站

版权声明
本文为[Grace God]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/201/202207190521089526.html

边栏推荐

猜你喜欢

随机推荐