减少数据请求

有一个按钮发送Ajax请求，当用户再点击得时候，一不小心点击了很多次，那么这个事件函数就需要执行许多次，从而导致发送多次请求，这就会影响服务器性能和导致前端页面的重绘，所以我们需要解决这个问题，js函数防抖就可以解决，不管用户点击多次，最终只发送一次

案例：

<!--pages/fangdou/fangdou.wxml-->
<button type="primary" bindtap="click">
请求
</button>
// pages/fangdou/fangdou.js
Page({
  click:function(){
   wx.request({
     url: 'https://www.baidu.com/',
     success:function(){
       console.log(0)
     }
   })
  },
})

此时我们连续点击许多次会发现控制台就回输出许多次

小程序性能优化_前端页面

 

 这就会导致服务器的压力很大

// pages/fangdou/fangdou.js
Page({
  data:{
    //计时器
    time:null
  },
  click:function(){
    var that=this
    clearTimeout(that.time)
    that.time=setTimeout(function(){
      wx.request({
        url: 'https://www.baidu.com/',
        success:function(){
          console.log(0)
        }
      })
    },1000)
   
  },
})

此时我们在连续点击按钮，控制台只会输出一个结果，无论此时点击多少次，只在最后一次点击输出

小程序性能优化_前端页面_02

 

 

方法：

1>声明一个计算器

2>使用计算器前需要清理一下计时器，防止叠加