我正在尝试创建一个数组,该数组保存显示在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显示下一个,依此类推)。
您需要创建一个函数包装器,以将它们存储在数组中。就目前而言,您将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]();
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句