Dieser Artikel bietet Ihnen eine detaillierte Einführung (Codebeispiel) zur Anti-Shake-Drosselung. Ich hoffe, dass er Ihnen als Referenz dienen wird.
Funktionsdrosselung und Funktions-Anti-Shake, beides sind Mittel zur Optimierung der Hochfrequenzausführung von JS-Code.
Funktionsdrosselung (Throttle) und Funktionsentprellung (Debounce) werden beide verwendet, um die Ausführungshäufigkeit der Funktion zu begrenzen und die Reaktionsgeschwindigkeit zu optimieren, die dadurch verursacht wird, dass die Auslösefrequenz der Funktion zu hoch ist, um mit der Auslösefrequenz Schritt zu halten. Dies führt zu Verzögerungen, unterbrochener Animation oder dem Phänomen der Verzögerung.
Funktionsdrosselung (Throttle)
Funktionsdrosselung bedeutet, dass eine innerhalb eines bestimmten Zeitraums ausgeführte Operation nur einmal ausgeführt wird, also ein Ausführungszyklus ist voreingestellt Wenn der Zeitpunkt, an dem die Aktion aufgerufen wird, größer oder gleich dem Ausführungszyklus ist, wird die Aktion ausgeführt und tritt dann in den nächsten neuen Zyklus ein. Ein anschaulicheres Beispiel ist, wenn Sie den Wasserhahn festziehen, bis das Wasser in der Form herausfließt Tropfen, dann werden Sie feststellen, dass hin und wieder ein Tropfen Wasser herauskommt.
function debounce(fn, wait) {
var timeout = null;
return function() {
if(timeout !== null) clearTimeout(timeout);
timeout = setTimeout(fn, wait);
}
}
// 处理函数
function handle() {
console.log(Math.random());
}
// 滚动事件
window.addEventListener('scroll', debounce(handle, 1000));Funktionsentprellung (Entprellung)
Funktionsentprellung bedeutet, dass die Aktion innerhalb eines bestimmten Zeitraums nur dann ausgeführt wird, wenn sie kontinuierlich und häufig ausgelöst wird Einmalig, das heißt, die Aktion wird erst nach Ablauf von n Millisekunden seit dem Aufruf der Aktion ausgeführt. Wird diese Aktion innerhalb dieser n Millisekunden erneut aufgerufen, wird die Ausführungszeit neu berechnet, sodass fortlaufende Aktionen in einem kurzen Zeitraum erfolgen Die Zeit wird nur einmal ausgelöst. Angenommen, Sie halten Ihren Finger auf einer Feder und sie springt erst dann hoch, wenn Sie sie loslassen.
Zeitstempel
var throttle = function(func, delay) {
var prev = Date.now();
return function() {
var context = this;
var args = arguments;
var now = Date.now();
if (now - prev >= delay) {
func.apply(context, args);
prev = Date.now();
}
}
}
function handle() {
console.log(Math.random());
}
window.addEventListener('scroll', throttle(handle, 1000));Timer
var throttle = function(func, delay) {
var timer = null;
return function() {
var context = this;
var args = arguments;
if (!timer) {
timer = setTimeout(function() {
func.apply(context, args);
timer = null;
}, delay);
}
}
}
function handle() {
console.log(Math.random());
}
window.addEventListener('scroll', throttle(handle, 1000));Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in die Anti-Shake-Drosselung in JavaScript (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
