Die Beispiele in diesem Artikel beschreiben das Konzept und die Verwendung der JavaScript-Funktionsdrosselung. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
Als ich kürzlich eine Webseite erstellte, musste ich die Größe einiger Seitenelemente ändern, wenn sich das Browserfenster änderte, also habe ich das natürlich getan Ich dachte an Fenstergröße ändern. Ereignis, also habe ich es so geschrieben
<!DOCTYPE html>
<html>
<head>
<title>Throttle</title>
</head>
<body>
<script type="text/javascript">
n=0;
function resizehandler(){
console.log(new Date().getTime());
console.log(++n);
}
window.onresize=resizehandler;
</script>
</body>
</html>Die Funktion wurde implementiert, aber als ich die Größe des Browserfensters durch Ziehen änderte, schaute ich auf die Konsole
Ja, durch einfaches Ziehen und Ablegen wurde meine resizeHandler()-Methode 52 Mal ausgeführt. Dies ist überhaupt nicht der gewünschte Effekt. Tatsächlich ist der Code meiner resizeHandler()-Methode sehr kompliziert und verwendet sogar Ajax, um eine Anfrage zu senden Wenn es einfach wäre, die Fenstergröße einmal zu ändern, müsste man es 52 Mal aufrufen, was in Ordnung ist
Funktionsdrosselung
Tatsächlich besteht meine ursprüngliche Absicht nur darin, einige Anpassungen vorzunehmen Seite, nachdem die Größe des Fensters geändert wurde, und das Größenänderungsereignis des Fensters wird nicht ausgelöst, nachdem die Größenänderung abgeschlossen ist. Ich kenne die spezifische Häufigkeit nicht, aber es wird kontinuierlich aufgerufen, bis sich die Fenstergröße nicht mehr ändert. Tatsächlich ist ein ähnlicher Mechanismus die Mausbewegung, die in kurzer Zeit wiederholt ausgelöst wird.
In „JavaScript Advanced Programming“ gibt es eine spezielle Funktionsdrosselung, um dieses Problem zu lösen.
function throttle(method,context){
clearTimeout(method.tId);
method.tId=setTimeout(function(){
method.call(context);
},500);
}Das Prinzip ist sehr einfach, um die Funktionsausführung um 500 Millisekunden zu verzögern Wird innerhalb der Funktion eine Funktion erneut aufgerufen, wird der letzte Aufruf gelöscht, dieser Aufruf wird 500 Millisekunden später ausgeführt und so weiter. Auf diese Weise kann der Code, den ich gerade erstellt habe, in
<script type="text/javascript">
n=0;
function resizehandler(){
console.log(new Date().getTime());
console.log(++n);
}
function throttle(method,context){
clearTimeout(method.tId);
method.tId=setTimeout(function(){
method.call(context);
},500);
}
window.onresize=function(){
throttle(resizehandler,window);
};
</script>geändert und ausprobiert werden. Natürlich wird er nur einmal ausgeführt >
Es gibt auch einen Funktionsabschnitt zum Internet-Streaming-Schema, das ist, was es tutRufen Sie es auf und probieren Sie es aus, der gleiche Effekt
function throttle(method,delay){
var timer=null;
return function(){
var context=this, args=arguments;
clearTimeout(timer);
timer=setTimeout(function(){
method.apply(context,args);
},delay);
}
}<script type="text/javascript">
n=0;
function resizehandler(){
console.log(new Date().getTime());
console.log(++n);
}
function throttle(method,delay){
var timer=null;
return function(){
var context=this, args=arguments;
clearTimeout(timer);
timer=setTimeout(function(){
method.apply(context,args);
},delay);
}
}
window.onresize=throttle(resizehandler,500);//因为返回函数句柄，不用包装函数了
</script>Vergleichen
, damit jedes Mal, wenn wir beurteilen, wie lang das Intervall ist, es sofort ausgeführt wird, wenn es die eingestellte Zeit überschreitet. Versuchen Sie den Effekt mit dem Beispiel gerade
function throttle(method,delay,duration){
var timer=null, begin=new Date();
return function(){
var context=this, args=arguments, current=new Date();;
clearTimeout(timer);
if(current-begin>=duration){
method.apply(context,args);
begin=current;
}else{
timer=setTimeout(function(){
method.apply(context,args);
},delay);
}
}
}window.onresize=throttle(resizehandler,100,200);
Natürlich wird es weder häufig noch zuletzt ausgeführt
