JavaScript-Thema 4: Drosselung

Inhaltsverzeichnis

• Vorwort
• 1. Drosselung für Fortgeschrittene
• Am Ende geschrieben

(kostenlose Lernempfehlung:

Javascript-Video-Tutorial )

Vorwort

Reden wir über Throttling – die Idee einer weiteren Optimierungsfunktion.

Nehmen wir das mobile Event

nbsp;html>
    <meta>
    <meta>
    <meta>
    <title>Document</title>
    <style>
        #wrapper {
            width: 100%;
            height: 140px;

            background: rgba(0, 0, 0, 0.8);

            color: #fff;
            font-size: 30px;
            font-weight: bold;
            line-height: 140px;
            text-align: center;
        }
    </style>
    <p></p>

    <script>
        var count = 1;
        function moveAction () {
            oWrapper.innerHTML = count++;
        }

        var oWrapper = document.querySelector(&#39;#wrapper&#39;);
		oWrapper.onmousemove = moveAction;
    </script>

Der Effekt ist wie folgt:

1. Kern- und Grundimplementierung

Das Prinzip der Drosselung ist ganz einfach:

Wenn Sie weiterhin ein Event auslösen , ein bestimmtes Innerhalb des Zeitintervalls wird es nur einmal ausgeführt.

In Bezug auf die Implementierung der Drosselung gibt es zwei gängige Implementierungsmethoden:

Zeitstempel-Idee

1. Timer-Idee
2. 1.1 Zeitstempel-Idee

Wie der Name schon sagt, wird das Zeitintervall durch zwei Zeitstempel gesteuert. wenn das Ereignis ausgelöst wird:

Wir nehmen den aktuellen Zeitstempel now heraus

1. Dann subtrahieren wir den Zeitstempel der vorherigen now；
2. 然后减去之前执行时的时间戳(首次值为 0 ) prev；
3. 如果大now - prev > wait，证明时间区间维护结束，执行指定事件，更新prev；

根据这一思路，我们就可以实现第一版代码了：

oWrapper.onmousemove = throttle(moveAction, 1000);function throttle(func, wait) {
    var _this, arg;
    var prev = 0; // 上一次触发的时间，第一次默认为0

    return function () {
        var now = Date.now(); // 触发时的时间
        _this = this;
        if (now - prev > wait) {
            func.apply(_this, arg); // 允许传入参数，并修正this
            prev = now; // 更新上一次触发的时间
        }
    }}

来看看借助它，效果是什么样的：

我们可以看到：

1. 当鼠标移入的时候，事件立刻执行
2. 每过 1s 会执行一次，且移动2.5s会执行2次，意味着动作停止后不会再执行。

1.2 定时器思路

利用定时器来保证间隔时间内事件的触发次数

1. 创建定时器timer，记录当前是否在周期内；
2. 判断定时器是否存在，若存在则直接结束，否则执行事件；
3. wait时间之后再次执行，并清掉定时器；

当触发事件的时候，我们设置一个定时器，再触发事件的时候，如果定时器存在，就不执行，直到定时器执行，然后执行函数，清空定时器，这样就可以设置下个定时器。

function throttle(func, wait) {
    var _this, arg;
    var timer; // 初始化
    return function () {
        _this = this; // 记录this
        arg = arguments; // 记录参数数组
        if (timer) return; // 时候未到
        timer = setTimeout(() => {
            func.apply(_this, arg); // 允许传入参数，并修正this
            timer = null;
        }, wait);
    }}

来看看借助它，效果是什么样的：

但是，我们可以看到：

1. 当鼠标移入的时候，事件不会立刻执行;
2. 鼠标定制后waitAusführung
(der erste Wert ist 0) prev；

Wenn der Wert now - prev > ist, wird bewiesen, dass die Zeitintervallwartung beendet ist, das angegebene Ereignis ausgeführt und <code>prev;

aktualisiert Nach dieser Idee können wir jetzt die erste Version des Codes implementieren:

// 第三版function throttle(func, wait) {
    var timeout, context, args, result;
    var previous = 0;

    var later = function() {
        previous = +new Date();
        timeout = null;
        func.apply(context, args)
    };

    var throttled = function() {
        var now = +new Date();
        //下次触发 func 剩余的时间
        var remaining = wait - (now - previous);
        context = this;
        args = arguments;
         // 如果没有剩余的时间了或者你改了系统时间
        if (remaining  wait) {
            if (timeout) {
                clearTimeout(timeout);
                timeout = null;
            }
            previous = now;
            func.apply(context, args);
        } else if (!timeout) {
            timeout = setTimeout(later, remaining);
        }
    };
    return throttled;}

Wir sehen: Wenn sich die Maus hineinbewegt, wird das -Ereignis sofort ausgeführt nach dem Stoppen nicht erneut ausgeführt wird. Verwenden Sie Timer, um die Anzahl der Auslöser von Ereignissen innerhalb des Intervalls sicherzustellen. Erstellen Sie einen Timer timer, um aufzuzeichnen, ob die aktuelle Zeit innerhalb des Wenn das Ereignis ausgelöst wird, stellen wir einen Timer ein. Wenn ein Ereignis ausgelöst wird und ein Timer vorhanden ist, wird es erst dann ausgeführt, wenn der Timer ausgeführt wird. Anschließend wird die Funktion ausgeführt, um den Timer zu löschen, damit die Der nächste Timer kann eingestellt werden. rrreeeMal sehen, wie der Effekt mit seiner Hilfe ist:

Mal sehen, wie der Effekt damit ist:
Es wird alle 1 Sekunde einmal ausgeführt, und die Bewegung wird innerhalb von 2,5 Sekunden zweimal ausgeführt, was bedeutet, dass die Aktion		1.2 Timer-Idee
	Zeitraums liegt Beurteilen Sie den Timer. Wenn er existiert, wird er sofort beendet. Andernfalls wird das Ereignis ausgeführt.	wait wird nach Ablauf der Zeit erneut ausgeführt und der Timer wird gelöscht

Wir können jedoch Folgendes sehen:

Wenn die Maus nach innen bewegt wird, wird das Ereignis nicht sofort ausgeführt.

Nachdem die Maus angepasst wurde, wird es nach dem Warten Intervall Einmal

1.3 Der Unterschied zwischen den beiden Ideen

ZeitstempelTimer

🎜🎜"Startpunkt"🎜🎜Sofort ausführen🎜 🎜n Sekunden später🎜 🎜🎜🎜"Ende" 🎜🎜Es wird nach dem Stoppen nicht ausgeführt 🎜🎜Es wird nach dem Stoppen erneut ausgeführt 🎜🎜🎜🎜🎜🎜 2. Drosselungsfortschritt🎜🎜🎜Zwei Ideen kombiniert, um eine Drosselungsmethode zu vervollständigen, die sein kann wird sofort ausgeführt und nach dem Auslösen des Stopps erneut ausgeführt:🎜rrreee🎜Der Effekt wird wie folgt demonstriert:🎜🎜🎜🎜🎜Als ich mir den Code ansah, musste ich die Daten wiederholt ausdrucken, bevor ich verstand, warum es getan wurde. Lasst uns zusammenarbeiten~🎜🎜🎜🎜Verwandte kostenlose Lernempfehlungen: 🎜🎜🎜Javascript🎜🎜 🎜(Video)🎜🎜🎜

Das obige ist der detaillierte Inhalt vonJavaScript-Thema 4: Drosselung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!