Implementing Time Delays in JavaScript: Synchronous and Asynchronous Approaches

Introduction

When building interactive web applications, it’s common to require a delay before executing certain actions. This is especially true for visual transitions or event handling. In JavaScript, there are different ways to implement such delays, utilizing both asynchronous and synchronous methods. Understanding how these approaches work will enable developers to create smooth user experiences on the web.

Asynchronous Time Delays in JavaScript

JavaScript provides built-in functions setTimeout() and setInterval(), which allow you to schedule code execution after a specified delay or at regular intervals. These are inherently asynchronous, meaning they do not block the execution of subsequent code while waiting for the delay to pass.

Using setTimeout

The setTimeout function is used to execute a piece of code once after a defined number of milliseconds:

function changeImage() {
  $(".trigger").find('img').prop('src', 'http://localhost:8888/images/img_onclick.jpg');
}

// Set the image to change after clicking and wait for 1 second before changing back
$(".trigger").toggle(function () {
    $(this).addClass("active");
    setTimeout(() => { 
        $(".trigger").find('img').prop('src', 'http://localhost:8888/images/img.jpg'); 
    }, 1000); // delay of 1000ms (1 second)
}, function () {
    $(this).removeClass("active");
    changeImage();
});

Using setInterval

The setInterval method is similar to setTimeout, but it executes repeatedly at every interval specified until it’s stopped:

let toggleId = null;
$(".trigger").click(function () {
    if(toggleId) clearInterval(toggleId);
    
    $(this).next(".toggle-container").slideToggle();
    toggleId = setInterval(() => { 
        // Perform repetitive tasks
    }, 1000); // Calls every second
});

To stop the setInterval, you can use clearInterval(id) where id is the identifier returned by setInterval.

Synchronous Time Delays in JavaScript

Although not recommended due to their potential for causing unresponsive behavior, synchronous delays block execution of other scripts until the delay has passed. This method should be used with caution as it can freeze the user interface.

Using a While Loop

The following example demonstrates how to implement a synchronous delay:

function delay(milliseconds) {
    let start = Date.now();
    while ((Date.now() - start) < milliseconds) { /* do nothing */ }
}

$(".trigger").click(function () {
    $(this).find('img').prop('src', 'http://localhost:8888/images/img_onclick.jpg');
    
    delay(1000); // Synchronous 1-second delay

    $(this).find('img').prop('src', 'http://localhost:8888/images/img.jpg');
});

This method is not recommended for modern web development as it blocks the main thread, preventing other scripts from running and potentially freezing the user interface.

Best Practices

While asynchronous methods are generally preferred in JavaScript due to their non-blocking nature, there are scenarios where synchronous delays might be necessary or easier. However, developers should always strive to provide a smooth user experience by avoiding techniques that can cause the browser’s UI thread to become unresponsive.

Async/await is another modern approach to handling asynchronous code more comfortably and readable:

async function delayedChange() {
    console.log('Changing image...');
    await new Promise(resolve => setTimeout(resolve, 1000));
    $(".trigger").find('img').prop('src', 'http://localhost:8888/images/img.jpg');
}

$(".trigger").click(function () {
    $(this).addClass("active");
    changeImage();
    delayedChange(); // This function handles the delay and subsequent action
});

In conclusion, when implementing time delays in JavaScript, it is crucial to understand the differences between asynchronous and synchronous methods. Asynchronous methods, such as setTimeout and setInterval, are generally preferred for creating responsive applications that do not freeze during operation.