JQuery - 在执行函数之前暂停

Question

我不能让JQuery 在函数执行前等待一秒钟。当user 打开网页时，JQuery 脚本会显示通知。目前，所有通知都会立即显示，但我希望它们在例如 1000 毫秒后被一一添加。

我尝试了setInterval 和setTimeOut，但没有任何效果。

我的代码 - 通知仍在同时显示。

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

你有什么想法吗？

Answer 1

您需要将一个函数传递给setTimeout。您正在立即调用该函数并传递结果。

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

另外，这条线毫无意义。

setTimeout('showLobiboxNotification', 1000);

如果setTimeout 的参数是字符串，则它必须是有效的Javascript 语句。仅仅给出一个函数的名字并没有任何作用。

Answer 2

对于每个通知，您在同一时间调用方法 showLobiboxNotification。

我认为你可以这样做

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

Answer 3

我可以看到您来自同步语言，超时在 javascript 中是异步的，因此您不能在函数末尾附加超时或 sleep 并期望执行冻结，因为 javascript 不会这样做。

用超时包装整个showLobiboxNotification 函数。这种方式比用超时包装函数的调用更模块化。并且不那么复杂。

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

另外，如果你是函数式编程的粉丝，你可以编写一个帮助程序

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