Comment éviter les sauts de clics multiples provoqués par la limitation de la fonction de l'applet WeChat

Lors de l'étude de cet article, nous devons savoir ce qu'est la limitation des fonctions, La signification de la limitation des fonctions et de l'anti-secousse, alors ceci Je souhaite principalement partager avec vous comment éviter les sauts de clics multiples dus à la limitation de la fonction de l'applet WeChat. J'espère que cela sera utile à tout le monde.

Scénario

Lors de l'utilisation du mini programme, il y aura une situation comme celle-ci : lorsque l'état du réseau est mauvais ou bloqué En cas de pauses, les utilisateurs penseront que le clic n'est pas valide et cliqueront plusieurs fois, pour finalement accéder à la page plusieurs fois.

Solution

Ensuite, j'ai trouvé la solution de Comprendre facilement la limitation de la fonction JS et la fonction anti-shake, c'est limitation de fonction : si une fonction est déclenchée plusieurs fois au cours d'une période de temps, elle ne sera exécutée que pour la première fois. Avant la fin de cette période, la fonction ne sera pas exécutée quel que soit le nombre de fois où elle est déclenchée.

/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>

De cette façon, un clic fou sur le bouton ne se déclenchera qu'une fois par seconde.

Mais il y a un problème dans ce cas, c'est-à-dire que lorsque vous voulez obtenir this.data, le this que vous obtenez n'est pas défini, ou si vous souhaitez que les données soient transmises à la fonction de clic par le bouton du composant WeChat, elle n'est pas non plus définie, donc la fonction d'accélérateur a encore besoin d'un certain traitement pour la rendre disponible dans la page js de l'applet WeChat.

La raison de cette situation est que l'accélérateur renvoie une nouvelle fonction, qui n'est plus la fonction d'origine. La nouvelle fonction enveloppe la fonction d'origine, de sorte que les paramètres transmis par le bouton du composant se trouvent dans la nouvelle fonction. Nous devons donc transmettre ces paramètres à la fonction fn qui doit réellement être exécutée.

La fonction d'accélérateur finale est la suivante :

<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>

Cliquez à nouveau sur le bouton et ceci et e sont disponibles :

Recommandations associées :

Comment implémenter une applet de mémo de conversation

Explication détaillée de la limitation des fonctions JavaScript

Explication détaillée des concepts de limitation des fonctions JavaScript et exemples d'utilisation

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!