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()函数：

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

 .dialog-con { height: 100%; display: none; position: fixed; width: 100%; background-color: rgba(0, 0, 0, .0); z-index: 50; transition: ease 300ms; } .dialog-anim { width: 100%; height: 100%; display: none; display: flex; flex-direction: column; justify-content: center; opacity: 0; margin-top: -20px; } .dialog { margin: auto; padding: 12px 27px; background: white; border-radius: 3px; width: 520px; transform: translateY(30px) } .dialog .title-con { margin-bottom: 25px; } .dialog .title { font-size: 35px; padding-bottom: 7px; } .dialog .error-code { margin-top: 15px; color: rgba(0, 0, 0, .6); font-family: "Courier New", Courier, monospace } .dialog .subtitle { font-size: 17px; color: rgba(0, 0, 0, 0.4); } .dialog .text {} .dialog .button-con { margin-top: 25px; } .dialog button { margin: auto; float: right; color: white; border: none; padding: 9px 37px; background: #10b5ff; text-transform: uppercase; font-weight: bold; border-radius: 3px; } .dialog button:hover { background: black; cursor: pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="dialog-con"> <div class="dialog-anim"> <div class="dialog"> <div class="title-con"> <div class="title">Error Message Title</div> <div class="subtitle"></div> </div> <div class="text-con"> <div class="text">Error Message</div> <div class="error-code"></div> </div> <div class="button-con" onclick="dialogHide()"> <button>Ok</button> </div> </div> </div> </div> 

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

因此，我要执行此操作的原因是，如果某些事件触发了多个错误，则将它们推入数组并一个接一个地显示（按OK会显示下一个错误，依此类推）。

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]();

Answer 2

ChadF方法的另一种选择是实例化一个函数，并在您想要显示消息时在其上调用一个方法。

 // Your base function function error(a, b, c, d) { this.show = function() { alert(a + " " + b + " " + c + " " + d); }; } var dialogQueue = []; // Creating an instance of "error" dialogQueue.push(new error("test", "test2", "test3", "test4")); dialogQueue.push(new error("testing again", "test2", "test3", "test4")); alert("Data finished pushing"); for (var i = 0; i < dialogQueue.length; i++) { // Calling the "show" method from "error" dialogQueue[i].show(); } 

Answer 3

您可以将args推送到数组上，然后使用它来执行函数。 您可以使用apply调用带有一组参数的给定函数。

像这样：

dialogQueue=[];
//fill the queue with arguments
dialogQueue.push([1,2,3,4]);
dialogQueue.push(["test","test","test","test"]);
dialogQueue.push(["bla","bla","bla","bla"]);

//fire off everything in the queue
var len=dialogQueue.length;
for (i=0;i<len;i++) {
//pop off the args, and use apply to call them
var args=dialogQueue.pop();
errorCall.apply(this, args);
}