执行setTimeout后，在元素列表之后出现Javascript错误"missing ]

Question

我最初的想法是这是一个语法问题，但我没有看到任何语法问题。我添加了调试代码，这产生了奇怪的结果，在jQuery('#notification')之前记录了x

document.triggerNotification = function (type, message) {
    jQuery(document.body).append("<div class='push-notification push-"+type+"' id='notification'>"+message+"</div>");

    setTimeout(jQuery('#notification').fadeOut(1200, function () {
        console.log(jQuery('#notification'));
        jQuery('#notification').remove();
        console.log(jQuery('#notification'));
    }), 3000);
    console.log('x');
}

Firebug提供以下输出：

x
[div#notification.push-notification]
[]
missing ] after element list - [Break on this error] [object Object]

一切都在成功执行，但仍然抛出错误。

Answer 1

setTimeout需要一个函数作为它的第一个参数。您为它提供了一个jQuery对象的集合。尝试以下操作：

document.triggerNotification = function (type, message) {
    jQuery(document.body).append("<div class='push-notification push-"+type+"' id='notification'>"+message+"</div>");

    setTimeout(function() { jQuery('#notification').fadeOut(1200, function () {
        console.log(jQuery('#notification'));
        jQuery('#notification').remove();
        console.log(jQuery('#notification'));
    })}, 3000);
    console.log('x');
}

注意包装在jQuery('#notification').fadeOut()调用周围的匿名函数。使用您当前的代码，我希望fadeOut立即执行，而不是在指定的3秒之后执行。