Le mini-programme utilise la limitation des fonctions pour résoudre le problème des sauts de pages multiples

Cet article vous présentera comment utiliser la limitation de fonctions dans de petits programmes pour résoudre le problème des sauts de pages multiples. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Lors de l'utilisation de mini-programmes, il y aura une situation : lorsque les conditions du réseau sont mauvaises ou bloquées, l'utilisateur pensera que le clic est invalide et cliquera plusieurs fois. et enfin, la page saute plusieurs fois. Ce problème peut être résolu grâce à la limitation des fonctions et à la fonction anti-shake dans JS.

Selon la documentation officielle, la limitation des fonctions consiste à spécifier une unité de temps. Dans cette unité de temps, la fonction de rappel qui déclenche l'événement ne peut être exécutée qu'une seule fois si un événement est déclenché plusieurs fois dans la même unité. le temps, , ne peut prendre effet qu’une seule fois. Modifiez donc le fichier .js comme suit :

function throttle(fn, gapTime) {
if (gapTime == null|| gapTime == undefined) {
gapTime = 1500
}
let _lastTime = nullreturn function () {
let _nowTime = +new Date()
if (_nowTime -_lastTime > gapTime || !_lastTime) {
fn()
_lastTime =_nowTime
}
}
}
module.exports = {
throttle: throttle
}
/pages/throttle/throttle.wxml:
tap
/pages/throttle/throttle.js
const util = require(\'../../utils/util.js\')
Page({
data: {
text: \'tomfriwel\'
},
onLoad: function (options) {
},
tap:util.throttle(function (e) {
console.log(this)
console.log(e)
console.log((newDate()).getSeconds())
}, 1000)
})

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

Mais il y a un problème dans ce cas, c'est-à-dire que lorsque vous souhaitez obtenir this.data, le this obtenu n'est pas défini, ou si vous souhaitez obtenir les données transmises à la fonction de clic par WeChat bouton de composant, il n'est pas non plus défini, donc la fonction d'accélérateur a encore besoin d'effectuer un petit traitement pour qu'elle puisse être utilisée 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 :

function throttle(fn, gapTime) {
    if (gapTime == null|| gapTime == undefined) {
        gapTime = 1500
    }
 
    let _lastTime = null// 返回新的函数 return function () {
        let _nowTime = +new Date()
        if (_nowTime -_lastTime > gapTime || !_lastTime) {
           fn.apply(this, arguments)   //将this和参数传给原函数
            _lastTime =_nowTime
        }
    }
}

Cliquez à nouveau sur le bouton pour avoir à la fois ceci et e :

Recommandé : "

Tutoriel de développement de mini-programmes》

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!