javascript sleep with SetTimeout

Question

I'm trying to send emails with a 10 seconds delay between. I wrote this code:

$(document).ready(function() {
    for (i = 0; i < 20; i++) {
        setTimeout("SendEmail(" + i + ")", 5000);
    }
});

function SendEmail(id) {
    $.get("mimesender.php?id=" + id, function(data) {
        var toAppend = "<span>     " + data + "</span>"
        $("#sentTo").append(toAppend);
    });
}

server side code(php) gets the id and selects the email with the specified id from the database

$query="select email from clienti where id =".$id;

then sends the email, and sends back the current email

echo email;

However, something is wrong here. It seems like the the js function waits for 5 seconds, and then displays all the 20 email addresses at once.

Can you tell me what I'm doing wrong ? any "sleep "workaround will be greatly appreciated :)

All the setTimeouts are basically called at the same time. — Felix Kling
– Felix Kling, Commented Dec 24, 2011 at 12:12

Muhammad Usman · Accepted Answer · 2011-12-24 12:58:09Z

3

Use interval instead of loop.

Working demo: http://jsfiddle.net/xfVa9/2/

$(document).ready(function() {
    var tmr;
    var i=0;
    tmr=setInterval(function(){
        if(i<20){
            SendEmail(i);
            alert("Sent "+i)
            i++;
        }else{
            clearInterval(tmr);
        }

    },5000)

 });

edited Dec 24, 2011 at 12:58

answered Dec 24, 2011 at 12:19

Muhammad Usman

12.5k6 gold badges39 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Peter-Paul van Gemerden Over a year ago

+1 for using setInterval. Be aware, though, that i is being declared as a global variable. Here's an improved example: jsfiddle.net/xfVa9/3

Pradeep · Accepted Answer · 2011-12-24 12:13:41Z

2

You should create a function which calls itself after 5 seconds

var i=0;

function sendEmailNow() {
     SendEmail(i);
     ++i;
   if(i<20) {
        setTimeout(sendEmailNow, 5000);
    }
}

answered Dec 24, 2011 at 12:13

Pradeep

1,2641 gold badge22 silver badges41 bronze badges

2 Comments

Pradeep Over a year ago

@PointedEars Yes, it can be done. And I also agree global variables are evil but that is concern in JavaScript applications or webpage using much of JS code. Here I am not passing function construct (to avoid global variable) only for making it more readable (which is also desired).

PointedEars Over a year ago

This can be done without global i and without a function expression, see other answers. But function expressions are an important tool one should learn about.

Svend · Accepted Answer · 2011-12-24 12:13:17Z

2

What happens is that you call setTimeout 20 times, just after one another, with a timeout of 5 seconds. So naturally, all emails gets sent at once. You could change the loop to look like this:

for (i=0;i<20;i++) {
    setTimeout("SendEmail("+ i + ")",(i+1)*5000);
}

There's alot of other options though, and they'd depend on just what suits your specific problem best.

answered Dec 24, 2011 at 12:13

Svend

8,2083 gold badges33 silver badges46 bronze badges

Comments

pimvdb · Accepted Answer · 2011-12-24 12:14:22Z

2

First, pass a function to setTimeout.

Secondly, you'd be better off if you set the timeout for the next one in the queue after the current one is finished.

In the for loop:

sendEmail(0); // start sending first

and in the callback:

      , function(data) {
          if(id < 19) { // if next should be sent
              setTimeout(function() {
                  SendEmail(id + 1);
              }, 5000);
          }
          var toAppend = "<span>     " + data + "</span>"
          $("#sentTo").append(toAppend);
      }

answered Dec 24, 2011 at 12:14

pimvdb

155k80 gold badges313 silver badges358 bronze badges

Comments

minikomi · Accepted Answer · 2011-12-24 12:16:11Z

1

Your loop is setting up 20 timers to wait 5 seconds, then letting them all go at once.

Try something like this:

var email_count = 20;

var sendMails = function(){
    SendEmail(email_count--);
    if(email_count > 0){
        setTimeout(sendMails, 5000);
    }
}

setTimeout(sendMails, 5000)

answered Dec 24, 2011 at 12:16

minikomi

8,5233 gold badges47 silver badges52 bronze badges

Comments

PointedEars · Accepted Answer · 2011-12-24 23:20:16Z

0

Avoid jQuery. Learn JavaScript.
var i = 0; (otherwise leak into outer scope or runtime error)

Extra closure:

window.setTimeout(
  (function (j) {
     return function () {
       sendEmail(j);
     };
   }(i)),
  i * 10000);

sendEmail (code style: not a constructor)
You really want to escape $id in the server-side code to prevent SQL injection.

edited Dec 24, 2011 at 23:20

answered Dec 24, 2011 at 12:23

PointedEars

15k4 gold badges36 silver badges33 bronze badges

Collectives™ on Stack Overflow

javascript sleep with SetTimeout

6 Answers 6

1 Comment

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related