How to Make Function Wait in JavaScript

How to Make Function Wait in JavaScript

To make JavaScript wait, use the combination of Promises, async/await, and setTimeout() function through which you can write the wait() function. In this tutorial, you'll see How to Make Function Wait in JavaScript

JavaScript does not provide any native functions like wait(). When it comes to JavaScript Timing Events, there are the following functions that you can use in your project.

  1. setTimeout()
  2. clearInterval()
  3. setInterval()

Many programming languages have the sleep function that will wait for the program’s execution for a given number of seconds. But JavaScript does not have that native function.

Understanding JavaScript setTimeout()

To make JavaScript wait, use setTimeout() function with JavaScript promise. But, Unfortunately, standalone setTimeout() does not work quite as you might expect, based on how you use it. You may have already tried it at some point in the JavaScript loop and seen that setTimeout() function does not seem to work at all.

The problem rises from misunderstanding setTimeout() as a sleep() function of other languages when it works according to its own set of rules.

Let’s see the following code.

// app.js

for (let i = 1; i <= 5; i++) {
  setTimeout(() => console.log(`#${i}`), 1000);
}

In the above code, what we are trying to achieve is that we want to log the value i every 1 second until the for loop condition will be false.

javascript programming

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Learning JavaScript: Development Environments for JavaScript Programming

One of the nice things about learning JavaScript these days is that there is a plethora of choices for writing and running JavaScript code. In this article, I’m going to describe a few of these environments and show you the environment I’ll be using in this series of articles.

Learning JavaScript: Data Types and Variables

To paraphrase the title of an old computer science textbook, “Algorithms + Data = Programs.” The first step in learning a programming language such as JavaScript is to learn what types of data the language can work with. The second step is to learn how to store that data in variables. In this article I’ll discuss the different types of data you can work with in a JavaScript program and how to create and use variables to store and manipulate that data.

From imperative to declarative JavaScript

In this post, I will explain why declarative code is better than imperative code. Then I will list some techniques to convert imperative JavaScript to a declarative one in common situations.

JavaScript Memory Management System

The main goal of this article is help to readers to understand that how memory management system performs in JavaScript. I will use a shorthand such as GC which means Garbage Collection. When the browsers use Javascript, they need any memory location to store objects, functions, and all other things. Let’s deep in dive that how things going to work in GC.

How to start writing less error-prone code in JavaScript

How to start writing less error-prone code in JavaScript - Everything in JavaScript is an object!’. We said that this assertion is false. Many things in JavaScript can behave like an object, but that doesn’t mean it’s the object. We can say we have three types of objects (objects, functions and arrays) in JavaScript.