Jquery : How do i add a delay after function

jquery settimeout function
jquery delay
jquery setinterval
javascript delay function
jquery timer
jquery delay not working
jquery delay function call
jquery settimeout loop

I want to add a delay to 4 functions i have.

I tried to add delay like i did here, but that doesn't work.

$('.navList .li1').toggleClass('li1Active');
$('.navList .li2').delay(2000).toggleClass('li2Active');
$('.navList .li3').delay(2000).toggleClass('li3Active');
$('.navList .li4').delay(2000).toggleClass('li4Active');

You can call function like this and set interval

   $(document).ready(function() {
     $('.navList .li1').toggleClass('li1Active');
      //create function and call in  setTimeout
     function addActive() {     
      $('.navList .li2').toggleClass('li2Active');
      $('.navList .li3').toggleClass('li3Active');
      $('.navList .li4').toggleClass('li4Active');
     }

     // use setTimeout() to execute
     setTimeout(addActive, 2000);

    });

Run Function After Delay, You can add timeout function in jQuery (Show alert after 3 seconds): to understand how you can make delay using JQuery delay function. Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML.


You are trying to add a delay before doing something. So better way is to call a function and pass the selector and class to toggle there. Like this:

function addDelay(selector, toggleClass, delay) {
  setTimeout(function () {
    $(selector).toggleClass(toggleClass);
  }, delay);
}

Then call the function like so :

$('.navList .li1').toggleClass('li1Active');
addDelay('.navList .li2', 'li2Active', 2000);
addDelay('.navList .li3', 'li3Active', 2000);
addDelay('.navList .li4', 'li4Active', 2000);

jQuery setTimeout() Function Examples, James Hibbard explains how the jQuery and JavaScript function on), which calls a function or executes a code snippet after a specified delay (in milliseconds​). setTimeout refer to the same function, the only difference being that in the The delay method is meant specifically for adding a delay between  The delay() is an inbuilt method in jQuery which is used to set a timer to delay the execution of the next item in the queue. Syntax: $(selector).delay(para1, para2); Parameter: It accepts two parameters which are specified below-para1: It specifies the speed of the delay. para2: It is optional and specifies the name of the queue.


var elem = document.getElementsByTagName("LI");

for (i = 0; i < elem.length; i++) {
    highlight(elem[i], i*2000);
}

function highlight(elem, timeout) {
  setTimeout(function() {
    $(elem).toggleClass("red");
  }, timeout)
}

How to call a jQuery function after a certain delay?, Here, jQuery fadeOut() function is called after some seconds. You can try to run the following code to learn how to work with setTimeout() method  Type: String. A string containing the name of the queue. Defaults to fx, the standard effects queue. Added to jQuery in version 1.4, the .delay () method allows us to delay the execution of functions that follow it in the queue. It can be used with the standard effects queue or with a custom queue.


jQuery Effect delay() Method, Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java  function is the function to be executed after the timer expires. code (in the alternate syntax) is a string of code to be executed. delay is the number of milliseconds by which the function call


jQuery, The delay() is an inbuilt method in jQuery which is used to set a timer to delay the execution of the next item in the queue. Syntax: jQuery code to show the working of delay() method: Code #1: After clicking the “Click Me” button- How to create responsive image gallery using HTML, CSS, jQuery and Bootstrap? How to  To delay a function call, use setTimeout() function. setTimeout(functionname, milliseconds, arg1, arg2, arg3) The following are the parameters − functionname − The function name for the function to be executed. milliseconds − The number of milliseconds. arg1, arg2, arg3 − These are the arguments passed to the function. Example


How to add a delay in a JavaScript loop?, JavaScript doesn't offer any wait command to add a delay to the loops but we can do so using setTimeout method. This method executes a function, after waiting  The window.setTimeout() method can be written without the window prefix.. The first parameter is a function to be executed. The second parameter indicates the number of milliseconds before execution.