Question

在执行函数之前，我不能让JQuery等待一秒钟。 JQuery脚本会在user打开网页时显示通知。目前，所有通知都会立即显示，但我希望它们在例如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']];
            });
        }
    });
});

JQuery - 在执行函数之前暂停

3 个答案: