我制作了一个函数按顺序运行的系统。
我引入了 waitAndExecute 在上一个函数完成后运行函数。构建了 jsfiddle，它显示了 waitAndExecute 函数的工作原理。 (https://jsfiddle.net/wjuj7o8h/2/)
它与某些功能配合良好(在 jsfiddle startTest1 中)。 但是在引入 for 循环之后，它永远不会工作(在 jsfiddle startTest2 中)。
HTML
<textarea id="textarea" rows="25" cols="50">
</textarea>
<button id="startTest"> start Testing </button>
JavaScript
lastIndex = 0;
function waitAndExecute(condition, callback, interval = 30, maxcount = 100, errorcallback = function(){ alert("time limit");}){
var Interval_count = 0;
var Interval_ID = setInterval(function(){
if(condition()){
callback();
clearInterval(Interval_ID);
}
Interval_count += 1;
if(Interval_count > maxcount){
clearInterval(Interval_ID);
errorcallback();
}
},interval);
}
function compareTwo(x, y){
return x == y;
}
$('#startTest').click( function(){
var a = 1;
var syncMonitor = 0;
for(var i = 1; i < 10; i++){
waitAndExecute(
function(){
return compareTwo(lastIndex, i-1);
},
function(){
setTimeout(function(){
a = i * 100 + 1;
document.getElementById("textarea").value = document.getElementById("textarea").value + a.toString();
syncMonitor = 1;
},30);
waitAndExecute(function(){ return syncMonitor;},function(){
syncMonitor = 0;
setTimeout(function(){
a = i * 100 + 2;
document.getElementById("textarea").value = document.getElementById("textarea").value + a.toString();
syncMonitor = 1;
lastIndex = i;
},30);
})
});
}
});
我想要的结果
101 102 (30ms)
201 202 (60ms)
301 302 (90ms)
401 402 (120ms)
501 502 (150ms)
601 602 (180ms)
701 702 (210ms)
801 802 (240ms)
901 902 (270ms)
当前结果:
提醒时间限制
问题:
我怎样才能更容易地构建这个系统或者如何解决这个问题？
最佳答案
使用调用间隔来进行函数调用。不要使用 for 循环。
lastIndex = 0;
function waitAndExecute(condition, callback, interval = 30, maxcount = 100, errorcallback = function(){ alert("time limit");}){
var Interval_count = 0;
var Interval_ID = setInterval(function(){
if(condition()){
callback();
clearInterval(Interval_ID);
}
Interval_count += 1;
if(Interval_count > maxcount){
clearInterval(Interval_ID);
errorcallback();
}
},interval);
}
function compareTwo(x, y){
// document.getElementById("textarea").value = document.getElementById("textarea").value + "CompareTwo" + x.toString() + " " + y.toString() +"\n";
return x == y;
}
$('#startTest1').click( function(){
var a = 1;
var syncMonitor = 0;
setTimeout(function(){
a = 50 + 1;
document.getElementById("textarea").value = document.getElementById("textarea").value + a.toString() + "\n";
syncMonitor = 1;
},30);
waitAndExecute(function(){ return syncMonitor;},function(){
syncMonitor = 0;
setTimeout(function(){
a = 50 + 2;
document.getElementById("textarea").value = document.getElementById("textarea").value + a.toString() + "\n";
},30);
});
});
$('#startTest2').click( function(){
var callCount = 1;
callfunction();
var repeater = setInterval(function () {
if (callCount < 10) {
callfunction();
callCount += 1;
} else {
clearInterval(repeater);
}
}, 1000);
var a = 1;
var syncMonitor = 0;
var i = 1;
function callfunction(){
waitAndExecute(
function(){
return compareTwo(lastIndex, callCount-1);
},
function(){
setTimeout(function(){
a = callCount * 100 + 1;
document.getElementById("textarea").value = document.getElementById("textarea").value + a.toString();
syncMonitor = 1;
waitAndExecute(function(){ return syncMonitor;},function(){
syncMonitor = 0;
},30);
setTimeout(function(){
a = callCount * 100 + 2;
document.getElementById("textarea").value = document.getElementById("textarea").value + a.toString();
syncMonitor = 1;
lastIndex = callCount;
},30);
})
});
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="textarea" rows="25" cols="50">
</textarea>
<button id="startTest1"> start Testing1 </button>
<button id="startTest2"> start Testing2 </button>关于javascript - 在上一个函数完成后发出调用函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46231080/