微信小程序：防止按钮多次点击跳转（函数节流）

╰半橙微兮° 2022-02-25 20:14 561阅读 0赞

> 场景在使用小程序的时候会出现这样一种情况：当网络条件差或卡顿的情况下，使用者会认为点击无效而进行多次点击，最后出现多次跳转页面的情况，就像下图（快速点击了两次）：解决办法然后从轻松理解JS函数节流和函数 ...

<table> 
 <tbody> 
  <tr> 
   <td> <h3>场景</h3> <p>在使用<a href="http://www.wxapp-union.com/" rel="nofollow">小程序</a>的时候会出现这样一种情况：当网络条件差或卡顿的情况下，使用者会认为点击无效而进行多次点击，最后出现多次跳转页面的情况，就像下图（快速点击了两次）：</p> <p><a href="http://www.wxapp-union.com/data/attachment/portal/201801/26/094355x86oob0zoylyc0el.gif" rel="nofollow"><img alt="" src="http://www.wxapp-union.com/data/attachment/portal/201801/26/094355x86oob0zoylyc0el.gif"></a></p> <h3>解决办法</h3> <p>然后从&nbsp;<a href="https://mp.weixin.qq.com/s/3FZJ0nQLhj9PCi0pfBjc9A" rel="nofollow">轻松理解JS函数节流和函数防抖</a>&nbsp;中找到了解决办法，就是<strong><em>函数节流(throttle)：函数在一段时间内多次触发只会执行第一次，在这段时间结束前，不管触发多少次也不会执行函数。</em></strong></p> <p>&nbsp;</p> <p><strong>/utils/util.js:</strong></p> <pre><code>function throttle(fn, gapTime) {
&nbsp; &nbsp; if (gapTime == null || gapTime == undefined) {
&nbsp; &nbsp; &nbsp; &nbsp; gapTime = 1500
&nbsp; &nbsp; }

&nbsp; &nbsp; let _lastTime = null
&nbsp; &nbsp; return function () {
&nbsp; &nbsp; &nbsp; &nbsp; let _nowTime = + new Date()
&nbsp; &nbsp; &nbsp; &nbsp; if (_nowTime - _lastTime &gt; gapTime || !_lastTime) {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fn()
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; _lastTime = _nowTime
&nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; }
}

module.exports = { throttle }</code></pre> <p><strong>/pages/throttle/throttle.wxml:</strong></p> <pre><code>&lt;button&nbsp;bindtap='tap'&nbsp;data-key='abc'&gt;tap&lt;/button&gt;</code></pre> <p><strong>/pages/throttle/throttle.js</strong></p> <pre><code>const util = require('../../utils/util.js')

Page({
&nbsp; &nbsp; data: {
&nbsp; &nbsp; &nbsp; &nbsp; text: 'tomfriwel'
&nbsp; &nbsp; },
    
    // 多次点击的间隔时间 大于1秒，才会执行该函数
&nbsp; &nbsp; tap: util.throttle(function (e) {
&nbsp; &nbsp; &nbsp; &nbsp; console.log(this)
&nbsp; &nbsp; &nbsp; &nbsp; console.log(e)
&nbsp; &nbsp; &nbsp; &nbsp; console.log((new Date()).getSeconds())
&nbsp; &nbsp; }, 1000)
})</code></pre> <p>&nbsp;</p> <p>这样，疯狂点击按钮也只会1s触发一次。</p> <p>但是这样的话出现一个问题，就是当你想要获取<code>this.data</code>得到的<code>this</code>是<code>undefined</code>, 或者想要获取微信组件<code>button</code>传递给点击函数的数据<code>e</code>也是<code>undefined</code>，所以<code>throttle</code>函数还需要做一点处理来使其能用在微信小程序的页面<code>js</code>里。</p> <p><a href="http://www.wxapp-union.com/data/attachment/portal/201801/26/094705uyehn0y2vue4g2ra.jpg" rel="nofollow"><img alt="" src="http://www.wxapp-union.com/data/attachment/portal/201801/26/094705uyehn0y2vue4g2ra.jpg"></a></p> <p>出现这种情况的原因是<code>throttle</code>返回的是一个新函数，已经不是最初的函数了。新函数包裹着原函数，所以组件<code>button</code>传递的参数是在新函数里。所以我们需要把这些参数传递给真正需要执行的函数<code>fn</code>。</p> <p>最后的<code>throttle</code>函数如下：</p> <pre><code>function throttle(fn, gapTime) {
&nbsp; &nbsp; if (gapTime == null || gapTime == undefined) {
&nbsp; &nbsp; &nbsp; &nbsp; gapTime = 1500
&nbsp; &nbsp; }

&nbsp; &nbsp; let _lastTime = null

&nbsp; &nbsp; // 返回新的函数
&nbsp; &nbsp; return function () {
&nbsp; &nbsp; &nbsp; &nbsp; let _nowTime = + new Date()
&nbsp; &nbsp; &nbsp; &nbsp; if (_nowTime - _lastTime &gt; gapTime || !_lastTime) {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fn.apply(this, arguments) &nbsp; //将this和参数传给原函数
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; _lastTime = _nowTime
&nbsp; &nbsp; }
}
 
module.exports = { throttle }</code></pre> <p>再次点击按钮<code>this</code>和<code>e</code>都有了：</p> <p><a href="http://www.wxapp-union.com/data/attachment/portal/201801/26/094706po8iqpwfszoppbzw.jpg" rel="nofollow"><img alt="" src="http://www.wxapp-union.com/data/attachment/portal/201801/26/094706po8iqpwfszoppbzw.jpg"></a></p> <h3>参考</h3> 
    <ul> 
     <li><a href="https://mp.weixin.qq.com/s/3FZJ0nQLhj9PCi0pfBjc9A" rel="nofollow">轻松理解JS函数节流和函数防抖</a></li> 
    </ul><h3>源代码</h3> 
    <ul> 
     <li><a href="https://github.com/tomfriwel/MyWechatAppDemo" rel="nofollow">tomfriwel/MyWechatAppDemo</a>&nbsp;的<code>throttle</code>页面</li> 
    </ul></td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
  </tr> 
 </tbody> 
</table>