javascript - 将函数推送到数组，循环遍历并在执行后删除

Question

我正在尝试创建一个数组，其中包含 DOM 上显示的所有待处理错误消息（使用 jquery ），然后循环遍历该数组以查看是否有任何错误消息要调用，如果有，则在执行后删除它们。

我的问题是我不知道如何将函数推入数组然后执行它。这是我到目前为止所拥有的：

var dialogQueue = []

dialogQueue.push(errorCall("test", "test", "test", "test"));

for (var queueNum = 1, 1 < dialogQueue.length, 1++) {
    alert(dialogQueue[1])
}

如果有帮助，我的显示错误消息的代码：

function dialogShow() {
    $(".dialog-con").css("display", "block").css("background", "rgba(0,0,0,.8)")
    $(".body-wrapper").addClass("errorFilter");
    $(".dialog-anim").animate({
        opacity: 1,
        marginTop: "-=20px"
    })
    setTimeout(function () {
        $(".errorFilter").addClass("blur");
    }, 100);

}

function dialogHide() {
    $(".dialog-con").css("background", "rgba(0,0,0,.0")
    $(".body-wrapper").removeClass("blur");
    $(".dialog-anim").animate({
        opacity: 0,
        marginTop: "-=25px"
    }, 300)
    setTimeout(function () {
        $(".dialog-con").css("display", "none");
        $(".body-wrapper").removeClass("errorFilter");

        // Code for removing the function from the array after pushing OK on the dialog

    }, 1000);
}

function errorCall(title, sub, text, code) {
    $(".dialog .title").text(title);
    $(".dialog .subtitle").text(sub);
    $(".dialog .text").html(text);
    $(".dialog .error-code").html(code);
    dialogShow();
}

我将向您展示完整的errorCall()功能：

var dialogQueue = []

dialogQueue.push(errorCall("test", "test", "test", "test"));

for (var queueNum = 1, 1 < dialogQueue.length, 1++) {
    alert(dialogQueue[1])
}

function dialogShow() {
    $(".dialog-con").css("display", "block").css("background", "rgba(0,0,0,.8)")
    $(".body-wrapper").addClass("errorFilter");
    $(".dialog-anim").animate({
        opacity: 1,
        marginTop: "-=20px"
    })
    setTimeout(function () {
        $(".errorFilter").addClass("blur");
    }, 100);

}

function dialogHide() {
    $(".dialog-con").css("background", "rgba(0,0,0,.0")
    $(".body-wrapper").removeClass("blur");
    $(".dialog-anim").animate({
        opacity: 0,
        marginTop: "-=25px"
    }, 300)
    setTimeout(function () {
        $(".dialog-con").css("display", "none");
        $(".body-wrapper").removeClass("errorFilter");

        // Code for removing the function from the array after pushing OK on the dialog

    }, 1000);
}

function errorCall(title, sub, text, code) {
    $(".dialog .title").text(title);
    $(".dialog .subtitle").text(sub);
    $(".dialog .text").html(text);
    $(".dialog .error-code").html(code);
    dialogShow();
}

function dialogShow() {
    $(".dialog-con").css("display", "block").css("background", "rgba(0,0,0,.8)")
    $(".body-wrapper").addClass("errorFilter");
    $(".dialog-anim").animate({
        opacity: 1,
        marginTop: "-=20px"
    })
    setTimeout(function () {
        $(".errorFilter").addClass("blur");
    }, 100);

}

function dialogHide() {
    $(".dialog-con").css("background", "rgba(0,0,0,.0")
    $(".body-wrapper").removeClass("blur");
    $(".dialog-anim").animate({
        opacity: 0,
        marginTop: "-=25px"
    }, 300)
    setTimeout(function () {
        $(".dialog-con").css("display", "none");
        $(".body-wrapper").removeClass("errorFilter");
    }, 1000);
}

function errorCall(title, sub, text, code) {
    $(".dialog .title").text(title);
    $(".dialog .subtitle").text(sub);
    $(".dialog .text").html(text);
    $(".dialog .error-code").html(code);
    dialogShow();
}

errorCall("Hello stackoverflow!","This is how my error message dialog looks!","Blah blah blah blah","Code code code");

（“确定”按钮位移是视口很小的结果，请忽略它。）

所以我想这样做的原因是，如果某些事情触发了多个错误，它们就会被推送到数组中并一个接一个地显示（按“确定”显示下一个错误等）。

Answer 1

您需要创建一个函数包装器来将它们存储在数组中。就目前情况而言，您在将其推送到数组时调用了 errorCall。试试这个代码：

var dialogQueue = []

dialogQueue.push(
    function () {
        errorCall("test", "test", "test", "test")
    }
);

for (var queueNum = 0, 1 < dialogQueue.length, queueNum++) {
    alert( dialogQueue[queueNum]() );
}

您还想在执行后删除，所以可以这样做：

while(dialogQueue.length > 0) {
    alert( dialogueQueue[0]() );
    dialogueQueue.shift();
}

这是一个简化的示例：

var funcArr = [];

funcArr.push( console.log("Cat") );
// This immediately calls console.log, logging "cat".  After console.log is
// evaluated we push its return value `undefined`

// Instead, we wrap the console.log in an anonymous function.  This gives us
// a function which will execute what we desire when it is called.
funcArr.push( function() { console.log("cat"); } );

// there is nothing to invoke now, because we are creating a new function.
// now if we:
console.log( funcArr );
// we get: [function anonymous()]

// So if we say:
funcArr[0];
// this will evaluate to:
function() {
    console.log("cat");
};

// Therefore invoking funcArr[0] calls an anonymous function, which runs
// the function we actually wanted to run.
funArr[0]();