CODEWITHSUNDEEP
javascriptjquery
Milano
Milano

Reputation: 18705

JQuery - pause before executing a function

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?

Upvotes: 1

Views: 1495

Answers (3)

Bamieh
Bamieh

Reputation: 10906

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']];
            });
        }
    });
});

Upvotes: 1

anthony
anthony

Reputation: 126

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++;
            });
        }
    });
});

Upvotes: 2

Barmar
Barmar

Reputation: 780723

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.

Upvotes: 2

Related Questions