Calling more than 1 function in setTimeout

Asked 24/4, 2015 at 6:14 Answered 19/10, 2022 at 20:12

I want to call two functions at the end of one setTimeout() in JavaScript. Is it possible and if "yes" which one will be executed first?

setTimeout(function() {
    playmp3(nextpage);
    $.mobile.changePage($('#' + nextpage));
}, playTime);

Doorman answered 24/4, 2015 at 6:14 Comment(1)

What are playmp3 and changePage functions? – Nazler 24/4, 2015 at 6:18

Is it possible?

Yes, why wouldn't it be? setTimeout takes a callback function as it's 1st argument. The fact that it's a callback function doesn't change anything; the usual rules apply.

which one will be executed first?

Unless you're using Promise-based or callback-based code, Javascript runs sequentially so your functions would be called in the order you write them down.

setTimeout(function() {
  function1() // runs first
  function2() // runs second
}, 1000)

However, if you do this:

setTimeout(function() {
  // after 1000ms, call the `setTimeout` callback
  // In the meantime, continue executing code below
  setTimeout(function() {
    function1() //runs second after 1100ms
  },100)

  function2() //runs first, after 1000ms
},1000)

then the order changes since setTimeout is async in which case it get's fired after it's timer expires (JS continued and executed function2() in the meantime)

If you have issues with your above code then either one of your functions contains async code (setInterval(),setTimeout(), DOM event, WebWorker code etc), which confuses you.

async here stands for asynchronous meaning not occurring in a particular order

Reichel answered 24/4, 2015 at 6:17 Comment(0)

I've used this syntax and it works fine:

$('#element').on('keypress change', function (e) {
   setTimeout(function () { function1(); function2(); }, 500, $(this));
});

Merril answered 10/4, 2019 at 15:13 Comment(0)

5This worked like a charm for me (it's multiple functions that fire after an element is clicked):

const elem = document.getElementById("element-id");
    function parent(){
         elem.addEventListner("click", func1);
              function func1(){
                   // code here
                 setTimeout(func2, 250) //func2 fires after 200 ms
                  }
              function func2(){
                   // code here
                 setTimeout(func3, 100) //func3 fires 100 ms after func2 and 350 ms after func1
                  }
               function func3(){
                   // code here
                  }
    }
    parent():

Trager answered 2/12, 2020 at 18:28 Comment(0)

Try this code: it's working perfectly fine for me. With this code, you can call one function after the another using callback.

<script>
  function one(callback) {
    var x = document.getElementById("d1");
    x.style.color = "red";
    x.style.background = "grey";
    console.log("one");
    
    setTimeout(two, 1000);
  }
    
  function two(callback) {  
    var x = document.getElementById("d1");
    x.style.color = "blue";
    x.style.background = "black";
    console.log("two");
    
    setTimeout(three, 1000);
  }
    
  function three(callback) { 
    var x = document.getElementById("d1");
    x.style.color = "green";
    x.style.background = "white";
    console.log("three");
        
    setTimeout(four, 1000);
  }
    
  function four(callback) { 
    var x = document.getElementById("d1");
    x.style.color = "yellow";
    x.style.background = "white";
    console.log("four");
        
    setTimeout(five, 1000);
  }
  function five(callback) { 
    var x = document.getElementById("d1");
    x.style.color = "pink";
    x.style.background = "white";
    console.log("five");

    setTimeout(one, 1000);
  }
</script>
    
<head>
  <body>
    <div id="d1">this is first division</div>
    <button onclick="one(two)">on me</button>
  </body>
</head>

Photogravure answered 19/10, 2022 at 20:12 Comment(0)

Recommended topics

Hot tags