合作异步JavaScript: 超时和间隔

在这里，我们将讨论传统的JavaScript方法，这些方法可以在一段时间或一段规则间隔(例如，每秒固定的次数)之后，以异步方式运行代码，并讨论它们的用处，以及它们的固有问题。

介绍

很长一段时间以来，web平台为JavaScript程序员提供了许多函数，这些函数允许您在一段时间间隔过后异步执行代码，或者重复异步执行代码块，直到您告诉它停止为止。这些都是:

setTimeout()

在指定的时间后执行一段代码.

setInterval()

以固定的时间间隔，重复运行一段代码.

requestAnimationFrame()

setInterval()的现代版本;在浏览器下一次重新绘制显示之前执行指定的代码块，从而允许动画在适当的帧率下运行，而不管它在什么环境中运行.

这些函数设置的异步代码实际上在主线程上运行，但是您可以在迭代之间运行其他代码，运行效率或高或低，这取决于这些操作的处理器密集程度。无论如何，这些函数用于在web站点或应用程序上运行常量动画和其他后台处理。在下面的部分中，我们将向您展示如何使用它们。

setTimeout()

在指定的时间后执行一段代码. 它需要如下参数:

• 要运行的函数，或者函数引用。
• 表示在执行代码之前等待的时间间隔(以毫秒为单位，所以1000等于1秒)的数字。如果指定值为0(或完全省略该值)，函数将立即运行。稍后详述这样做的原因.
• 更多的参数：在指定函数运行时，希望传递给函数的值.

在下面的示例中，浏览器将在执行匿名函数之前等待两秒钟，然后显示alert消息 (see it running live, and see the source code):

let myGreeting = setTimeout(function() {
  alert('Hello, Mr. Universe!');
}, 2000)

我们指定的函数不必是匿名的。我们可以给函数一个名称，甚至可以在其他地方定义它，并将函数引用传递给setTimeout()。以下两个版本的代码片段相当于第一个版本:

// With a named function
let myGreeting = setTimeout(function sayHi() {
  alert('Hello, Mr. Universe!');
}, 2000)

// With a function defined separately
function sayHi() {
  alert('Hello Mr. Universe!');
}

let myGreeting = setTimeout(sayHi, 2000);

例如，如果我们有一个函数既需要从超时调用，也需要响应某个事件，那么这将非常有用。此外它也可以帮助保持代码整洁，特别是当超时回调超过几行代码时。

setTimeout() 返回一个标志符变量用来引用这个间隔，可以稍后用来取消这个超时任务，下面就会学到 Clearing timeouts 。

传递参数给setTimeout() 

我们希望传递给setTimeout()中运行的函数的任何参数，都必须作为列表末尾的附加参数传递给它。例如，我们可以重构之前的函数，这样无论传递给它的人的名字是什么，它都会向它打招呼：

function sayHi(who) {
  alert('Hello ' + who + '!');
}

人名可以通过第三个参数传进 setTimeout() ：

let myGreeting = setTimeout(sayHi, 2000, 'Mr. Universe');

Clearing timeouts

最后，如果创建了超时，您可以通过调用clearTimeout()，将setTimeout()调用的标识符作为参数传递给它，从而在超时运行之前取消。要取消上面的超时，你需要这样做：

clearTimeout(myGreeting);

setInterval()

当我们需要在一段时间之后运行一次代码时，setTimeout()可以很好地工作。但是当我们需要反复运行代码时会发生什么，例如在动画的情况下?

这就是setInterval()的作用所在。这与setTimeout()的工作方式非常相似，只是作为第一个参数传递给它的函数，重复执行的时间不少于第二个参数给出的毫秒数，而不是一次执行。您还可以将正在执行的函数所需的任何参数作为setInterval()调用的后续参数传递。

让我们看一个例子。下面的函数创建一个新的Date()对象，使用toLocaleTimeString()从中提取一个时间字符串，然后在UI中显示它。然后，我们使用setInterval()每秒运行该函数一次，创建一个每秒更新一次的数字时钟的效果。

(see this live, and also see the source):

function displayTime() {
   let date = new Date();
   let time = date.toLocaleTimeString();
   document.getElementById('demo').textContent = time;
}

const createClock = setInterval(displayTime, 1000);

像setTimeout()一样, setInterval() 返回一个确定的值，稍后你可以用它来取消间隔任务。

清除intervals

setInterval()永远保持运行任务,除非我们做点什么——我们可能会想阻止这样的任务,否则当浏览器无法完成任何进一步的任务时我们可能得到错误, 或者动画处理已经完成了。我们可以用与停止超时相同的方法来实现这一点——通过将setInterval()调用返回的标识符传递给clearInterval()函数:

const myInterval = setInterval(myFunction, 2000);

clearInterval(myInterval);

主动学习：创建秒表!

话虽如此，我们还是要给你一个挑战。以我们的setInterval-clock.html为例，修改它以创建您自己的简单秒表。

你要像前面一样显示时间，但是在这里，你需要：

• "Start" 按钮开始计时.
• "Stop" 按钮停止计时
• "Reset" 按钮清零.
• 时间显示经过的秒数.

提示:

• 您可以随心所欲地构造按钮标记;只需确保使用HTML语法，确保JavaScript获取按钮引用。
• 创建一个变量，从0开始，每秒钟增加1.
• 与我们版本中所做的一样，在不使用Date()对象的情况下创建这个示例更容易一些，但是不那么精确——您不能保证回调会在恰好1000ms之后触发。更准确的方法是运行startTime = Date.now()来获取用户单击start按钮的确切时间戳，然后执行Date.now() - startTime来获取单击start按钮后的毫秒数。
• 您还希望将小时、分钟和秒作为单独的值计算，然后在每次循环迭代之后将它们一起显示在一个字符串中。从第二个计数器，你可以计算出他们.
• 如何计时时分秒? 想一下:
  • 一小时3600秒.
  • 分钟应该是：时间减去小时后剩下的除以60.
  • 分钟都减掉后，剩下的就是秒钟了.
• 如果这个数字小于10，最好在显示的值前面加一个0，这样看起来更加像那么回事。
• 暂停的话，要清掉间隔函数。重置的话，显示要清零，要更新显示

关于 setTimeout() 和 setInterval() 需要注意的几点

当使用 setTimeout() 和 setInterval()的时候，有几点需要额外注意。 现在让我们回顾一下：

递归的timeouts

还有另一种方法可以使用setTimeout()：我们可以递归调用它来重复运行相同的代码，而不是使用setInterval()。

下面的示例使用递归setTimeout()每100毫秒运行传递来的函数：

let i = 1;

setTimeout(function run() {
  console.log(i);
  i++;
  setTimeout(run, 100);
}, 100);

将上面的示例与下面的示例进行比较 ––这使用setInterval（）来实现相同的效果：

let i = 1;

setInterval(function run() {
  console.log(i);
  i++
}, 100);

递归setTimeout()和setInterval()有何不同？

上述代码的两个版本之间的差异是微妙的。

• 递归 setTimeout() 保证执行之间的延迟相同，例如在上述情况下为100ms。 代码将运行，然后在它再次运行之前等待100ms，因此无论代码运行多长时间，间隔都是相同的。
• 使用 setInterval() 的示例有些不同。 我们选择的间隔包括执行我们想要运行的代码所花费的时间。假设代码需要40毫秒才能运行 - 然后间隔最终只有60毫秒。
• 当递归使用 setTimeout() 时，每次迭代都可以在运行下一次迭代之前计算不同的延迟。 换句话说，第二个参数的值可以指定在再次运行代码之前等待的不同时间（以毫秒为单位）。

当你的代码有可能比你分配的时间间隔，花费更长时间运行时，最好使用递归的 setTimeout() - 这将使执行之间的时间间隔保持不变，无论代码执行多长时间，你不会得到错误。

Immediate timeouts

Using 0 as the value for setTimeout() schedules the execution of the specified callback function as soon as possible but only after the main code thread has been run.

For instance, the code below (see it live) outputs an alert containing "Hello", then an alert containing "World" as soon as you click OK on the first alert.

setTimeout(function() {
  alert('World');
}, 0);

alert('Hello');

This can be useful in cases where you want to set a block of code to run as soon as all of the main thread has finished running — put it on the async event loop, so it will run straight afterwards.

Clearing with clearTimeout() or clearInterval()

clearTimeout() and clearInterval() both use the same list of entries to clear from. Interestingly enough, this means that you can use either method to clear a setTimeout() or setInterval().

For consistency, you should use clearTimeout() to clear setTimeout() entries and clearInterval() to clear setInterval() entries. This will help to avoid confusion.

requestAnimationFrame()

requestAnimationFrame() is a specialized looping function created for running animations efficiently in the browser. It is basically the modern version of setInterval() — it executes a specified block of code before the browser next repaints the display, allowing an animation to be run at a suitable frame rate regardless of the environment it is being run in.

It was created in response to perceived problems with setInterval(), which for example doesn't run at a frame rate optimized for the device, sometimes drops frames, continues to run even if the tab is not the active tab or the animation is scrolled off the page, etc. Read more about this on CreativeJS.

The method takes as an argument a callback to be invoked before the repaint. This is the general pattern you'll see it used in:

function draw() {
   // Drawing code goes here
   requestAnimationFrame(draw);
}

draw();

The idea is that you define a function in which your animation is updated (e.g. your sprites are moved, score is updated, data is refreshed, or whatever), then you call it to start the process off. At the end of the function block you call requestAnimationFrame() with the function reference passed as the parameter, and this instructs the browser to call the function again on the next display repaint. This is then run continuously, as we are calling requestAnimationFrame() recursively.

How fast does your animation run?

The smoothness of your animation is directly dependent on your animation's frame rate and it is measured in frames per second (fps). The higher this number is, the smoother your animation will look, to a point.

Since most screens have a refresh rate of 60Hz, the fastest frame rate you can aim for is 60 frames per second (FPS) when working with web browsers. However, more frames means more processing, which can often cause stuttering and skipping — also known as dropping frames, or jank.

If you have a monitor with a 60Hz refresh rate and you want to achieve 60 FPS you have about 16.7 milliseconds (1000 / 60) to execute your animation code to render each frame. This is a reminder that we need to be mindful of the amount of code that we try to run for each pass through the animation loop.

requestAnimationFrame() always tries to get as close to this magic 60 FPS value as possible, although sometimes it isn't possible — if you have a really complex animation and you are running it on a slow computer, your frame rate will be less. requestAnimationFrame() will always do the best it can with what it has available.

How does requestAnimationFrame() differ from setInterval() and setTimeout()?

Let's talk a little bit more about how the requestAnimationFrame() method differs from the other methods we looked at earlier. Looking at our code from above:

function draw() {
   // Drawing code goes here
   requestAnimationFrame(draw);
}

draw();

Let's now see how we'd do the same thing using setInterval():

function draw() {
   // Drawing code goes here
}

setInterval(draw, 17);

As we said before, we don't specify a time interval for requestAnimationFrame(); it just runs it as quickly and smoothly as possible in the current conditions. The browser also doesn't waste time running it if the animation is offscreen for some reason, etc.

setInterval() on the other hand requires an interval to be specified. We arrived at our final value of 17 via the formula 1000 milliseconds / 60Hz, and then rounded it up. Rounding up is a good idea, as if you rounded down the browser might try to run the animation faster than 60fps, and it wouldn't make any difference to the smoothness of the animation anyway. As we said before, 60Hz is the standard refresh rate.

Including a timestamp

The actual callback passed to the requestAnimationFrame() function can be given a parameter too — a timestamp value that represents the time since the requestAnimationFrame() started running. This is useful as it allows you to run things at specific times and at a constant pace, regardless of how fast or slow your device might be. The general pattern you'd use looks something like this:

let startTime = null;

function draw(timestamp) {
    if(!startTime) {
      startTime = timestamp;
    }

   currentTime = timestamp - startTime;

   // Do something based on current time

   requestAnimationFrame(draw);
}

draw();

Browser support

requestAnimationFrame() is supported in slightly more recent browsers than setInterval()/setTimeout() — most interestingly it is available in Internet Explorer 10 and above. So unless you need to support older versions of IE with your code, there is little reason to not use requestAnimationFrame().

A simple example

Enough with the theory; let's go through and build our own requestAnimationFrame() example. We're going to create a simple "spinner animation", the kind you might see displayed in an app when it is busy connecting to the server, etc.

1. First of all, grab a basic HTML template such as this one.

2. Put an empty <div> element inside the <body>, then add a ↻ character inside it. This is a circular arrow character that will act as our spinner for this simple example.

3. Apply the following CSS to the HTML template in whatever way you prefer. This sets a red background on the page, sets the <body> height to 100% of the <html> height, and centers the <div> inside the <body>, horizontally and vertically.

   html {
     background-color: white;
     height: 100%;
   }
   
   body {
     height: inherit;
     background-color: red;
     margin: 0;
     display: flex;
     justify-content: center;
     align-items: center;
   }
   
   div {
     display: inline-block;
     font-size: 10rem;
   }

4. Insert a <script> element just above the </body> tag.

5. Insert the following JavaScript inside your <script> element. Here we're storing a reference to the <div> inside a constant, setting a rotateCount variable to 0, setting an uninitialized variable that will later be used to contain a reference to the requestAnimationFrame() call, and setting a startTime variable to null, which will later be used to store the start time of the requestAnimationFrame().

   const spinner = document.querySelector('div');
   let rotateCount = 0;
   let rAF;
   let startTime = null;

6. Below the previous code, insert a draw() function that will be used to contain our animation code, which includes the timestamp parameter:

   function draw(timestamp) {
   
   }

7. Inside draw(), add the following lines. Here we define the start time if it is not defined already (this will only happen on the first loop iteration), and rotate the spinner character by an increasing amount with each iteration (the current timestamp, take the starting timestamp, divided by three so it doesn't go too fast):

     if (!startTime) {
      startTime = timestamp;
     }
   
     let rotateCount = (timestamp - startTime) / 3;
     spinner.style.transform = 'rotate(' + rotateCount + 'deg)';

8. Below the previous line inside draw(), add the following block — this checks to see if the value of rotateCount is above 359 (e.g. 360, a full circle). If so, removes 360 from the value so the circle animation can continue uninterrupted, at a sensible, low value. Note that this isn't strictly necessary, but it is easier to work with values of 0-359 degrees than values like "128000 degrees".

   if (rotateCount > 359) {
     rotateCount -= 360;
   }

9. At the very bottom inside the draw() function, insert the following line. This is the key to the whole operation — we are setting the variable we defined earlier to an active requestAnimation() call that takes the draw() function as its parameter. This starts the animation off, constantly running the draw() function at a rate of as close to 60 FPS as possible.

   rAF = requestAnimationFrame(draw);

Clearing a requestAnimationFrame() call

Clearing a requestAnimationFrame() call can be done by calling the corresponding cancelAnimationFrame() method (note, "cancel" not "clear" as with the "set..." methods), passing it the value returned by the requestAnimationFrame() call to cancel, which we stored in a variable called rAF:

cancelAnimationFrame(rAF);

Active learning: Starting and stopping our spinner

In this exercise, we'd like you to test out the cancelAnimationFrame() method by taking our previous example and updating it, adding an event listener to start and stop the spinner when the mouse is clicked anywhere on the page.

Some hints:

• A click event handler can be added to most elements, including the document <body>. It makes more sense to put it on the <body> element if you want to maximize the clickable area — the event bubbles up to its child elements.
• You'll want to add a tracking variable to check whether the spinner is spinning or not, clearing the animation frame if it is, and calling it again if it isn't.

Throttling a requestAnimationFrame() animation

One limitation of requestAnimationFrame() is that you can't choose your frame rate. This isn't a problem most of the time, as generally you want your animation to run as smoothly as possible, but what about when you want to create an old school, 8-bit-style animation?

This was a problem for example in the Monkey Island-inspired walking animation from our Drawing Graphics article:

In this example we have to animate both the position of the character on the screen, and the sprite being shown. There are only 6 frames in the sprite's animation; if we showed a different sprite frame for every frame displayed on the screen by requestAnimationFrame(), Guybrush would move his limbs too fast and the animation would look ridiculous. We therefore throttled the rate at which the sprite cycles its frames using the following code:

if (posX % 13 === 0) {
  if (sprite === 5) {
    sprite = 0;
  } else {
    sprite++;
  }
}

So we are only cycling a sprite once every 13 animation frames. OK, so it's actually about every 6.5 frames, as we update posX (character's position on the screen) by two each frame:

if(posX > width/2) {
  newStartPos = -((width/2) + 102);
  posX = Math.ceil(newStartPos / 13) * 13;
  console.log(posX);
} else {
  posX += 2;
}

This is the code that works out how to update the position in each animation frame.

The method you use to throttle your animation will depend on your particular code. For example, in our spinner example we could make it appear to move slower by only increasing our rotateCount by one on each frame instead of two.

Active learning: a reaction game

For our final section of this article, we'll create a 2-player reaction game. Here we have two players, one of whom controls the game using the A key, and the other with the L key.

When the Start button is pressed, a spinner like the one we saw earlier is displayed for a random amount of time between 5 and 10 seconds. After that time, a message will appear saying "PLAYERS GO!!" — once this happens, the first player to press their control button will win the game.

Let's work through this.

1. First of all, download the starter file for the app — this contains the finished HTML structure and CSS styling, giving us a game board that shows the two players' information (as seen above), but with the spinner and results paragraph displayed on top of one another. We just have to write the JavaScript code.

2. Inside the empty <script> element on your page, start by adding the following lines of code that define some constants and variables we'll need in the rest of the code:

   const spinner = document.querySelector('.spinner p');
   const spinnerContainer = document.querySelector('.spinner');
   let rotateCount = 0;
   let startTime = null;
   let rAF;
   const btn = document.querySelector('button');
   const result = document.querySelector('.result');

   In order, these are:

   1. A reference to our spinner, so we can animate it.
   2. A reference to the <div> element that contains the spinner, used for showing and hiding it.
   3. A rotate count — how much we want to show the spinner rotated on each frame of the animation.
   4. A null start time — will be populated with a start time when the spinner starts spinning.
   5. An uninitialized variable to later store the requestAnimationFrame() call that animates the spinner.
   6. A reference to the Start button.
   7. A reference to the results paragraph.

3. Next, below the previous lines of code, add the following function. This simply takes two numerical inputs and returns a random number between the two. We'll need this to generate a random timeout interval later on.

   function random(min,max) {
     var num = Math.floor(Math.random()*(max-min)) + min;
     return num;
   }

4. Next add in the draw() function, which animates the spinner. This is exactly the same as the version seen in the simple spinner example we looked at earlier:

     function draw(timestamp) {
       if(!startTime) {
        startTime = timestamp;
       }
   
       let rotateCount = (timestamp - startTime) / 3;
       spinner.style.transform = 'rotate(' + rotateCount + 'deg)';
   
       if(rotateCount > 359) {
         rotateCount -= 360;
       }
   
       rAF = requestAnimationFrame(draw);
     }

5. Now it is time to set up the initial state of the app when the page first loads. Add the following two lines, which simply hide the results paragraph and spinner container using display: none;.

   result.style.display = 'none';
   spinnerContainer.style.display = 'none';

6. We'll also define a reset() function, which sets the app back to the original state required to start the game again after it has been played. Add the following at the bottom of your code:

   function reset() {
     btn.style.display = 'block';
     result.textContent = '';
     result.style.display = 'none';
   }

7. OK, enough preparation.  Let's make the game playable! Add the following block to your code. The start() function calls draw() to start the spinner spinning and display it in the UI, hides the Start button so we can't mess up the game by starting it multiple times concurrently, and runs a setTimeout() call that runs a setEndgame() function after a random interval between 5 and 10 seconds has passed. We also add an event listener to our button to run the start() function when it is clicked.

   btn.addEventListener('click', start);
   
   function start() {
     draw();
     spinnerContainer.style.display = 'block';
     btn.style.display = 'none';
     setTimeout(setEndgame, random(5000,10000));
   }

   Note: You'll see that in this example we are calling setTimeout() without storing the return value (so not let myTimeout = setTimeout(functionName, interval)). This works and is fine, as long as you don't need to clear your interval/timeout at any point. If you do, you'll need to save the returned identifier.

   The net result of the previous code is that when the Start button is pressed, the spinner is shown and the players are made to wait a random amount of time before they are then asked to press their button. This last part is handled by the setEndgame() function, which we should define next.

8. So add the following function to your code next:

   function setEndgame() {
     cancelAnimationFrame(rAF);
     spinnerContainer.style.display = 'none';
     result.style.display = 'block';
     result.textContent = 'PLAYERS GO!!';
   
     document.addEventListener('keydown', keyHandler);
   
     function keyHandler(e) {
       console.log(e.key);
       if(e.key === 'a') {
         result.textContent = 'Player 1 won!!';
       } else if(e.key === 'l') {
         result.textContent = 'Player 2 won!!';
       }
   
       document.removeEventListener('keydown', keyHandler);
       setTimeout(reset, 5000);
     };
   }

   Stepping through this:

   1. First we cancel the spinner animation with cancelAnimationFrame() (it is always good to clean up unneeded processes), and hide the spinner container.
   2. Next we display the results paragraph and set its text content to "PLAYERS GO!!" to signal to the players that they can now press their button to win.
   3. We then attach a keydown event listener to our document — when any button is pressed down, the keyHandler() function is run.
   4. Inside keyHandler(), we include the event object as a parameter (represented by e) — its key property contains the key that was just pressed, and we can use this to respond to specific key presses with specific actions.
   5. We first log e.key to the console, which is a useful way of finding out the key value of different keys you are pressing.
   6. When e.key is "a", we display a message to say that Player 1 won, and when e.key is "l", we display a message to say Player 2 won. Note that this will only work with lowercase a and l — if an uppercase A or L is submitted (the key plus Shift), it is counted as a different key.
   7. Regardless of which one of the player control keys was pressed, we remove the keydown event listener using removeEventListener() so that once the winning press has happened, no more keyboard input is possible to mess up the final game result. We also use setTimeout() to call reset() after 5 seconds — as we explained earlier, this function resets the game back to its original state so that a new game can be started.

That's it, you're all done.

Conclusion

So that's it — all the essentials of async loops and intervals covered in one article. You'll find these methods useful in a lot of situations, but take care not to overuse them — since these still run on the main thread, heavy and intensive callbacks (especially those that manipulate the DOM) can really slow down a page if you're not careful.

In this module

• General asynchronous programming concepts
• Introducing asynchronous JavaScript
• Cooperative asynchronous JavaScript: Timeouts and intervals
• Graceful asynchronous programming with Promises
• Making asynchronous programming easier with async and await
• Choosing the right approach