WeChat ミニプログラム機能の調整によって引き起こされる複数のクリックジャンプを防ぐ方法

この記事を学習するときは、機能制限とは何か、機能制限と手ぶれ補正の意味 次に、この記事では主に WeChat アプレット機能制限を使用してジャンプする方法を説明します。複数回クリックして防止してください。皆さんのお役に立てれば幸いです。

シナリオ

ミニ プログラムを使用すると状況が発生します。ネットワークの状態が悪かったり、スタックしたりすると、ユーザーはクリックが無効であると考えて複数回クリックし、最終的に複数回クリックすると、ページジャンプの様子が表示されます。

解決策

そして、「わかりやすいJS関数スロットリングと関数アンチシェイク」から解決策を見つけました。これは、関数スロットル（スロットル）です：関数が一定期間内に複数回トリガーされた場合、最初の 1 回のみ、この期間が終了する前に、関数は何度トリガーされても実行されません。

/utils/util.js:

<span style="font-size: 14px;">function throttle(fn, gapTime) {<br/>    if (gapTime == null || gapTime == undefined) {<br/>        gapTime = 1500<br/>    }<br/>    let _lastTime = null return function () {<br/>        let _nowTime = + new Date()<br/>        if (_nowTime - _lastTime > gapTime || !_lastTime) {<br/>            fn()<br/>            _lastTime = _nowTime<br/>        }<br/>    }<br/>}<br/>module.exports = {<br/>  throttle: throttle<br/>}<br/>/pages/throttle/throttle.wxml:<br/><button bindtap=&#39;tap&#39; data-key=&#39;abc&#39;>tap</button><br/>/pages/throttle/throttle.js<br/>const util = require(&#39;../../utils/util.js&#39;)<br/>Page({<br/>    data: {<br/>        text: &#39;tomfriwel&#39;<br/>    },<br/>    onLoad: function (options) {<br/>    },<br/>    tap: util.throttle(function (e) {<br/>        console.log(this)<br/>        console.log(e)<br/>        console.log((new Date()).getSeconds())<br/>    }, 1000)<br/>})</span>

この方法では、ボタンをクリックしても 1 秒に 1 回だけトリガーされます。

しかし、この場合には問題があります。つまり、this.data を取得したい場合、取得する this が未定義であるか、WeChat コンポーネントによってクリック関数に渡されたデータ e を取得したい場合です。ボタンも未定義であるため、WeChat アプレットのページ js で使用できるように、スロットル関数でもう少し処理する必要があります。

これが起こる理由は、throttle が元の関数ではなくなった新しい関数を返すためです。新しい関数は元の関数をラップするため、コンポーネント ボタンによって渡されるパラメータは新しい関数内にあります。したがって、これらのパラメータを実際に実行する必要がある関数 fn に渡す必要があります。

最終的なスロットル機能は次のとおりです:

<span style="font-size: 14px;">function throttle(fn, gapTime) {<br/>    if (gapTime == null || gapTime == undefined) {<br/>        gapTime = 1500<br/>    }<br/>    let _lastTime = null // 返回新的函数 return function () {<br/>        let _nowTime = + new Date()<br/>        if (_nowTime - _lastTime > gapTime || !_lastTime) {<br/>            fn.apply(this, arguments)   //将this和参数传给原函数<br/>            _lastTime = _nowTime<br/>        }<br/>    }<br/>}<br/></span>

もう一度ボタンをクリックすると、これと e の両方が使用可能になります:

関連する推奨事項:

会話メモ アプレットの実装方法

JavaScript関数のスロットルの詳細な説明

JavaScript関数のスロットルの概念と使用例の詳細な説明

以上がWeChat ミニプログラム機能の調整によって引き起こされる複数のクリックジャンプを防ぐ方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。