Timing Events in JavaScript

Programming languages, due to the speed of modern computing power, execute commands very quickly. This is wonderful for processing large amounts of data, but less so for human interface purposes. If you want something to appear on a screen long enough for a user to process it, yet the computer runs through the code in 0.00001 seconds, well, you’re SOL, as very few people have the capacity to handle information at that rate. What we need is a way to ensure that the computer, upon printing something, takes a brief pause, to allow the viewer to take it all in.

For many languages, this is as simple as, in effect, putting a “pause” command within the code, with the pause time expressed in milliseconds. In Python, the Method is called sleep(), from the time library:

import time
for i in range(1, 11):
  print(i)
  time.sleep(1)

In this case, it’s seconds. But the syntax is very straightforward: Print something to the screen (1), then wait one second, then the next (2), and so on.

In asynchronous JavaScript, however, this not quite so easy. Since events happen as needed, rather than in the simple vertical order of the code, we need a different technique for ensuring that a set of commands are carried out in the linear fashion we humans expect. Here’s that same code in JS:

let i = 0;
let f = setInterval(function(){
    i++;
    if(counter >= 10) {
        clearInterval(f);
    }
}, 1000);

A bit nonintuitive, eh? Rather than making a simple loop with two lines of code (one to print, another to pause), we need to invoke two different methods: setInterval(), which recursively calls itself until a stop condition is provided, and clearInterval(), which (confusingly for me, at first) is called upon the function we’ve made and stops it. We’ve gone from a 1–10 loop to a recursive while loop, creating two methods and two variables in the process. Both the syntax and the logic were a bit formidable at first, but practice makes perfect.

During my Mod 3 project, the need for this task arose. My partner and I decided to implement an auto-drafting feature for computer opponents in a fantasy football draft. In this case, the computer “drafters” would examine the pool of available players and based on their current roster and a pre-defined set of conditions, would loop through the player set and “draft” one. We wanted each computer drafter’s pick to be displayed on screen for enough time for the user to take it in. A Python-style loop would have gone like this :

for opponent in opponents:
   player = draftPlayer(opponent)
   print("Opponent has selected: " + player)
   time.sleep(1)

Here’s what we had to do in JavaScript (using setTimeout() instead, which features similar logic to setInterval()):

const runDraftRound = () => {
   let i = 0
   const draftLoop = () => {
      setTimeout(() => {
         drafter(opponents[i])
         i++;
            if (i < opponents.length) {
               draftLoop();
            } else {
               setTimeout(() => {
         logActivity(`<b>--- END OF ROUND ${draftRound} ---</b>`)
         toggleButtons('Draft')
            draftRound++
            checkFinished()
         }, 1000)
         }
      }, 1000)
   }
draftLoop()
}

Three variables, half a dozen methods, and not one but *two* setTimeout counter function things. Thanks JavaScript (and to my indefatigable partner Ellis for figuring out the exact implentation)!