JQuery - pause before executing a function

Question

I can't make JQuery to wait a second before a function is executed. The JQuery script shows notification when user opens a web page. For now, all notifications show immediately but I want them to be added one by one after for example 1000 ms.

I've tried setInterval and setTimeOut but nothing worked.

My code - the notifications are still showing at the same time.

function showLobiboxNotification(msg, onClickUrl) {
    Lobibox.notify('info', {
        title: 'Notification',
        delay: false,
        msg: msg,
        sound: false,
        position: 'left bottom',
        showClass: 'fadeInDown',
        hideClass: 'fadeUpDown',
        rounded: 'true',
        onClickUrl: onClickUrl
    });
    setTimeout('showLobiboxNotification', 1000)
}

$(document).ready(function () {
    $.ajax({
        type: 'GET',
        url: "/ajax/get-base-notifications/",
        success: function (data) {
            $.each(data, function (k, message) {
                setTimeout(showLobiboxNotification(message['msg'], message['url']),1000);
            });
        }
    });
});

Do you have any idea?

This smells of an XY question. Why do you want to pause? Your (trying) to create timeouts within timeouts, this is going to run very odd. — Liam
– Liam, Commented Aug 12, 2016 at 14:06
Have you tried triggering custom events and catching them? (See trigger method) Remember that setTimeout doesn't mean to "wait", it just adds the function call a second later to the event loop. — Guillermo
– Guillermo, Commented Aug 12, 2016 at 14:07
Possible duplicate: stackoverflow.com/questions/18965768/… — IronAces
– IronAces, Commented Aug 12, 2016 at 14:09
The AJAX returns something like this: {'message1':{'msg':'This is a message','url':'Some url'}, 'message2':{'msg'..... For each message1,message2... I call function above which creates a notification. What I want is to set some delay between notifications. — Milano
– Milano, Commented Aug 12, 2016 at 14:12

Barmar · Accepted Answer · 2016-08-12 14:15:27Z

2

You need to pass a function to setTimeout. You're calling the function immediately and passing the result.

    $.each(data, function (k, message) {
        setTimeout(function() {
            showLobiboxNotification(message['msg'], message['url'])
        },1000);
    });

Also, this line makes no sense.

setTimeout('showLobiboxNotification', 1000);

If the argument to setTimeout is a string, it needs to be a valid Javascript statement. Just giving the name of a function doesn't do anything.

answered Aug 12, 2016 at 14:15

Barmar

789k57 gold badges555 silver badges669 bronze badges

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

6 Comments

ADyson Over a year ago

setTimeout(function() { showLobiboxNotification(message['msg'], message['url']) },1000); this is wrapping a function within a function - not really necessary. setTimeout(showLobiboxNotification(message['msg'], message['url']),1000); will do just as well.

Barmar Over a year ago

No it won't, that's the whole problem. That calls showLobiboxNotification before calling setTimeout.

ADyson Over a year ago

no, it absolutely does not. Have you even tried it? Simple example:

var myVar;  function myFunction() {     myVar = setTimeout(alertFunc, 3000); }  function alertFunc() {     alert("Hello!"); }  myFunction();

The alert box will show after 3 seconds. It clearly sets a timeout whereby alertFunc() is executed after 3 seconds. It's just a named function instead of an anonymous one, that's the only difference.

Barmar Over a year ago

That's different, you didn't write alertFunc(), so it passes a reference to the function instead of calling it.

Barmar Over a year ago

Try setTimeout(alertFunc(), 3000) to see something analogous to what he wrote.

|

anthony · Accepted Answer · 2016-08-12 14:24:15Z

You call the method showLobiboxNotification in same time for every notifications.

I think you can do somothing like this

    function showLobiboxNotification(msg, onClickUrl) {
    Lobibox.notify('info', {
        title: 'Notification',
        delay: false,
        msg: msg,
        sound: false,
        position: 'left bottom',
        showClass: 'fadeInDown',
        hideClass: 'fadeUpDown',
        rounded: 'true',
        onClickUrl: onClickUrl
    });
}

$(document).ready(function () {
    $.ajax({
        type: 'GET',
        url: "/ajax/get-base-notifications/",
        success: function (data) {
            var responseIndex = 1;
            $.each(data, function (k, message) {
                setTimeout(showLobiboxNotification(message['msg'], message['url']), responseIndex * 1000);
                responseIndex++;
            });
        }
    });
});

Bamieh · Accepted Answer · 2016-08-12 14:27:48Z

1

I can see you come from a synchronous language, timeouts are async in javascript, hence you cant append a timeout or a sleep to the end of a function and expect the execution to freeze, because javascript doesnt do that.

wrap the whole showLobiboxNotification function with a timeout. this way its more modular than wrapping the calling of the function with a timeout. and a little bit less complex.

function showLobiboxNotification(msg, onClickUrl, delay) {
    setTimeout(function() {

      Lobibox.notify('info', {
        title: 'Notification',
        delay: false,
        msg: msg,
        sound: false,
        position: 'left bottom',
        showClass: 'fadeInDown',
        hideClass: 'fadeUpDown',
        rounded: 'true',
        onClickUrl: onClickUrl
      });
    }, 1000*delay)
}

$(document).ready(function () {
    $.ajax({
        type: 'GET',
        url: "/ajax/get-base-notifications/",
        success: function (data) {
            $.each(data, function (k, message) {
                showLobiboxNotification(message['msg'], message['url'], k);
            });
        }
    });
});

additionally if you are a fan of functional programming you can write a helper

callAfterDelay(delay, fn, params,) {
    setTimeout(function() {
       fn(...params)
    }, 1000*delay)
}

$(document).ready(function () {
    $.ajax({
        type: 'GET',
        url: "/ajax/get-base-notifications/",
        success: function (data) {
            $.each(data, function (k, message) {
                callAfterDelay(k, showLobiboxNotification, [message['msg'], message['url']];
            });
        }
    });
});

edited Aug 12, 2016 at 14:27

answered Aug 12, 2016 at 14:15

Bamieh

11k5 gold badges34 silver badges52 bronze badges

4 Comments

ADyson Over a year ago

if there were 10 notifications, this will just set 10 timeouts for 1 second's time, but set those timeouts all at once, so effectively they'll still all occur together (or near enough). Certainly not spaced 1 second apart.

Bamieh Over a year ago

simply added a delay, the problem with OP is that he is facing trouble with async and sync, not with code writing. as i said at the beginning of the answer, its async while he thinks its sync. anyways

ADyson Over a year ago

he already had a delay, you just moved where the delay code is written. The issue is that he wants them to wait one second between notifications, not one second after the ajax returns.

ADyson Over a year ago

ok just spotted the 1000*delay - sorry, not reading properly this afternoon! Ok it might just work then.

Collectives™ on Stack Overflow

JQuery - pause before executing a function

3 Answers 3

6 Comments

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related