Beispielcode für einen Javascript-Timer

1. Was ist ein Timer?

JS bietet einige native Methoden, um die Ausführung eines bestimmten Codeabschnitts zu verzögern.

setTimeout: Einstellen eines Timers. Führen Sie eine Funktion oder ein Codesegment einmal aus, nachdem der Timer abgelaufen ist

var timeoutId = window.setTimeout(func[, delay, param1, param2, ...]);
var timeoutId = window.setTimeout(code[, delay]);

• timeoutId: Timer-ID

• func: Funktion, die danach ausgeführt wird Verzögerung

• Code: Codezeichenfolge, die nach der Verzögerung ausgeführt wird. Es wird nicht empfohlen, das Prinzip zu verwenden: Verzögerungszeit (Einheit: Millisekunden), der Standardwert ist 0eval()

• param1, param2: Parameter, die an die Verzögerungsfunktion übergeben werden, IE9 und höher unterstützen

• : Rufen Sie eine Funktion oder ein Codesegment wiederholt in einem festen Zeitintervall auf

setInterval

intervalId: ID des wiederholten Vorgangs

var intervalId = window.setInterval(func, delay[, param1, param2, ...]);
var intervalId = window.setInterval(code, delay);

• func: Funktion mit Verzögerung aufgerufen

• Code: Codesegment

• Verzögerung: Verzögerungszeit, kein Standardwert

• : Führen Sie die angegebene Funktion sofort aus, nachdem der Browser den aktuell ausgeführten Vorgang vollständig beendet hat (implementiert nur in IE10 und Node 0.10+), ähnlich wie

setImmediatesetTimeout(func, 0)

immediateId: Timer-ID

var immediateId = setImmediate(func[, param1, param2, ...]);
var immediateId = setImmediate(func);

• func: Rückruf

• : Eine API, die speziell für die Erzielung einer leistungsstarken Frame-Animation entwickelt wurde. Die Verzögerungszeit kann jedoch nicht angegeben werden, sondern wird anhand der Aktualisierungsfrequenz (Frame) des Browsers bestimmt

requestAnimationFrame

func: callback

var requestId = window.requestAnimationFrame(func);

• Oben werden vier JS-Timer kurz vorgestellt, und in diesem Artikel werden hauptsächlich die beiden häufiger verwendeten vorgestellt:

  und
.

2. Um ein Beispiel zu nennen

setTimeoutsetInterval

Grundlegende Verwendung

und Der Unterschied zwischen

// 下面代码执行之后会输出什么？
var intervalId, timeoutId;

timeoutId = setTimeout(function () {
    console.log(1);
}, 300);

setTimeout(function () {
    clearTimeout(timeoutId);
    console.log(2);
}, 100);

setTimeout('console.log("5")', 400);

intervalId = setInterval(function () {
    console.log(4);
    clearInterval(intervalId);
}, 200);

// 分别输出: 2、4、5

?

• setIntervalsetTimeoutWenn es

  und
ist, unterscheiden sie sich nur in der Anzahl der Ausführungen,

einmal und

// 执行在面的代码块会输出什么？
setTimeout(function () {
    console.log('timeout');
}, 1000);

setInterval(function () {
    console.log('interval')
}, 1000);

// 输出一次 timeout，每隔1S输出一次 interval

/*--------------------------------*/

// 通过setTimeout模拟setInterval 和 setInterval有啥区别么？
var callback = function () {
    if (times++ > max) {
        clearTimeout(timeoutId);
        clearInterval(intervalId);
    }

    console.log('start', Date.now() - start);
    for (var i = 0; i n-mal. <p><code>setTimeout</code>Der Unterschied zwischen <code>setInterval</code> und <code>setTimeout</code>, der durch <code>setInterval</code> simuliert wird, besteht darin, dass: </p> den nächsten Timer <p> erst anruft, nachdem der <code>setTimeout</code>-Rückruf abgeschlossen ist, während <code>setInterval</code> Unabhängig davon Abhängig vom Ausführungsstatus der Rückruffunktion wird, wenn <code>setInterval</code> die angegebene Zeit erreicht, ein Ereignis <code>setTimeout</code>, das den Rückruf ausführt, in die Ereigniswarteschlange eingefügt. Daher müssen Sie diese Funktion von <strong> bei der Auswahl des Timers berücksichtigen Wird es Auswirkungen auf Ihren Geschäftscode haben? Wer ist schneller, </strong><code>setInterval</code><strong></strong><code>setInterval</code> oder </p>? (Ich habe diesen Test nur aus Neugier geschrieben) 

• setTimeout(func, 0)setImmediate(func)Der Test in

  ergab, dass
früher ausgeführt wurde

console.time('immediate');
console.time('timeout');

setImmediate(() => {
    console.timeEnd('immediate');
});

setTimeout(() => {
    console.timeEnd('timeout');
}, 0);

Node.JS v6.7.0setTimeoutInterviewfragen

• Was ist das Ergebnis, nachdem der folgende Code ausgeführt wurde?

Die Antwort auf die Frage wird später beantwortet

// 题目一
var t = true;
 
setTimeout(function(){
    t = false;
}, 1000);
 
while(t){}
 
alert('end');

/*--------------------------------*/

// 题目二
for (var i = 0; i <p><strong>3. Das Funktionsprinzip des JS-Timers <em></em> wird oben erklärt. Bevor wir die Frage beantworten, wollen wir zunächst verstehen, wie der Timer funktioniert. Hier verwenden wir ein Beispiel aus „Wie JavaScript-Timer funktionieren“, um das Funktionsprinzip des Timers zu erläutern. </strong></p><h2></h2><p>Im Bild oben stellt die Zahl links die Zeit in Millisekunden dar; der Text links bedeutet, dass der Browser nach Abschluss eines Vorgangs fragt, was drin ist die aktuelle Warteschlange, die auf die Ausführung wartet; das blaue Quadrat stellt den Codeblock dar, der ausgeführt wird; der Text auf der rechten Seite stellt dar, welche asynchronen Ereignisse auftreten, während der Code ausgeführt wird. Der allgemeine Ablauf der Abbildung ist wie folgt: </p><p><img src="https://img.php.cn/upload/article/000/000/013/14c7285aa427c9064d4fe8d1ea51338d-0.png"    style="max-width:90%"  style="max-width:90%" title="Beispielcode für einen Javascript-Timer" alt="Beispielcode für einen Javascript-Timer"></p>Wenn das Programm startet, beginnt die Ausführung eines JS-Codeblocks und die Ausführungszeit beträgt etwa 18 ms. Während der Ausführung treten 3 asynchrone Ereignisse auf werden ausgelöst, einschließlich eines <p>, Mausklickereignisses, </p>

• setTimeoutDas erste setInterval wird zuerst ausgeführt, mit einer Verzögerungszeit von 10 ms. Später erscheint das Mausereignis und Der Browser fügt es in die Ereigniswarteschlange ein. Die Click-Callback-Funktion wird

  später ausgeführt. Nachdem 10 ms angekommen sind,
wird der
• Callback in die Ereigniswarteschlange

  setTimeoutsetIntervalsetTimeout eingefügt Der erste Codeblock wird ausgeführt, der Browser prüft, welche Ereignisse in der Warteschlange warten, und entnimmt den Code oben in der Warteschlange, um ihn auszuführen setTimeout

• Wenn der Browser den Mausklick-Rückruf verarbeitet ,

  prüft erneut. Wenn die Verzögerungszeit erreicht ist, fügt er erneut einen Intervallrückruf in die Ereigniswarteschlange ein. In Zukunft wird nach jeder angegebenen Verzögerungszeit ein Rückruf in die Warteschlange eingefügt

• 后面浏览器将在执行完当前队头的代码之后，将再次取出目前队头的事件来执行

这里只是对定时器的原理做一个简单版的描述，实际的处理过程比这个复杂。

四、题目答案

好啦，我们现在再来看看上面的面试题的答案。

第一题

alert永远都不会执行，因为JS是单线程的，且定时器的回调将在等待当前正在执行的任务完成后才执行，而while(t) {}直接就进入了死循环一直占用线程，不给回调函数执行机会

第二题

代码会输出 5 5 5 5 5，理由同上，当i = 0时，生成一个定时器，将回调插入到事件队列中，等待当前队列中无任务执行时立即执行，而此时for循环正在执行，所以回调被搁置。当for循环执行完成后，队列中存在着5个回调函数，他们的都将执行console.log(i)的操作，因为当前js代码上中并没有使用块级作用域，所以i的值在for循环结束后一直为5，所以代码将输出5个5

第三题

这个问题涉及到this的指向问题，由setTimeout()调用的代码运行在与所在函数完全分离的执行环境上. 这会导致这些代码中包含的this关键字会指向window (或全局)对象，window对象中并不存在shout方法，所以就会报错，修改方案如下:

var obj = {
    msg: 'obj',
    shout: function () {
        alert(this.msg);
    },
    waitAndShout: function() {
        var self = this; // 这里将this赋给一个变量
        setTimeout(function () {
            self.shout();
        }, 0);    
    }
};
obj.waitAndShout();

五、需要注意的点

• setTimeout有最小时间间隔限制，HTML5标准为4ms，小于4ms按照4ms处理，但是每个浏览器实现的最小间隔都不同

• 因为JS引擎只有一个线程，所以它将会强制异步事件排队执行

• 如果setInterval的回调执行时间长于指定的延迟，setInterval将无间隔的一个接一个执行

• this的指向问题可以通过bind函数、定义变量、箭头函数的方式来解决

Das obige ist der detaillierte Inhalt vonBeispielcode für einen Javascript-Timer. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!