Das Miniprogramm nutzt Funktionsdrosselung, um das Problem mehrerer Seitensprünge zu lösen-Mini-Programmentwicklung-php.cn

Das Miniprogramm nutzt Funktionsdrosselung, um das Problem mehrerer Seitensprünge zu lösen

青灯夜游

Freigeben： 2021-04-27 09:15:04

nach vorne

2870 Leute haben es durchsucht

In diesem Artikel erfahren Sie, wie Sie die Funktionsdrosselung in kleinen Programmen verwenden, um das Problem mehrerer Seitensprünge zu lösen. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Das Miniprogramm nutzt Funktionsdrosselung, um das Problem mehrerer Seitensprünge zu lösen

Bei der Verwendung von Miniprogrammen kommt es zu einer Situation: Wenn die Netzwerkbedingungen schlecht sind oder hängen bleiben, denkt der Benutzer, dass der Klick ungültig ist, und klickt mehrmals. und schließlich springt die Seite mehrmals. Dieses Problem kann durch Funktionsdrosselung und Funktions-Anti-Shaking in JS gelöst werden.

Laut offizieller Dokumentation besteht die Funktionsdrosselung darin, eine Zeiteinheit anzugeben. Innerhalb dieser Zeiteinheit kann die Rückruffunktion, die das Ereignis auslöst, nur einmal ausgeführt werden Zeit, kann nur einmal wirksam werden. Ändern Sie daher die .js-Datei wie folgt:

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(\&#39;../../utils/util.js\&#39;)
Page({
data: {
text: \&#39;tomfriwel\&#39;
},
onLoad: function (options) {
},
tap:util.throttle(function (e) {
console.log(this)
console.log(e)
console.log((newDate()).getSeconds())
}, 1000)
})

Nach dem Login kopieren

Auf diese Weise löst ein verrückter Klick auf die Schaltfläche sie nur einmal pro Sekunde aus.

Aber in diesem Fall gibt es ein Problem, das heißt, wenn Sie diese Daten erhalten möchten, ist die erhaltene Datei undefiniert, oder wenn Sie die Daten erhalten möchten, die von WeChat an die Klickfunktion übergeben werden Die Komponentenschaltfläche ist ebenfalls undefiniert, daher muss die Drosselfunktion noch ein wenig verarbeitet werden, damit sie in den Seiten-JS des WeChat-Applets verwendet werden kann.

Das Miniprogramm nutzt Funktionsdrosselung, um das Problem mehrerer Seitensprünge zu lösen

Der Grund für diese Situation ist, dass Gas eine neue Funktion zurückgibt, die nicht mehr die ursprüngliche Funktion ist. Die neue Funktion umschließt die ursprüngliche Funktion, sodass die von der Komponentenschaltfläche übergebenen Parameter in der neuen Funktion enthalten sind. Wir müssen diese Parameter also an die Funktion fn übergeben, die tatsächlich ausgeführt werden muss.

Die Endgasfunktion ist wie folgt:

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

Nach dem Login kopieren

Klicken Sie erneut auf die Schaltfläche, um sowohl dies als auch e zu haben:

Das Miniprogramm nutzt Funktionsdrosselung, um das Problem mehrerer Seitensprünge zu lösen