Javascript 我怎样才能让这个代码使序列变得明显?
下面的代码允许我使用一个带有一组数字的数组,例如“thearray=[2,8,9]”并循环该数组,对于数组中的每个数字项,例如“2,8,9”,代码调用函数的次数等于数组中当前数字项的次数。因此,如果当前数字项为2,则函数将被调用两次 在一组调用之后,会有一个暂停,然后再次调用该函数的次数等于数组中的当前数字等。换句话说,当数组循环时,如果当前数字项为2,则将调用名为“thefunction”的函数两次,然后会有一个暂停和函数“thefunction”然后再次调用的次数等于数组中的下一个数字 在我的例子中,“thefunction”只是显示一条警报框消息两次,然后是暂停,然后是8次,然后是暂停,然后是9次,然后是暂停等。当然,对于警报框消息,我会按顺序获取消息,因为我必须选择ok才能看到下一条警报消息。问题是,我无法让对“thefunction”的调用显示为顺序调用,就像在“thefunction”中要执行的代码显示一个警报框,而其他代码(如向ul添加数据的li项)则在该函数中一样 这就好像两个电话是同时打的,然后8个电话是同时打的,等等。尽管情况可能并非如此,但它发生得如此之快,似乎如此。我想放慢速度。因此,如果“thefunction”中的代码是将信息附加到li元素的代码,而不是在调用序列不明显的地方快速添加信息,我希望有一个延迟,以便在附加li元素时,序列更明显,而不是快速,因为很难看到序列 代码如下:Javascript 我怎样才能让这个代码使序列变得明显?,javascript,Javascript,下面的代码允许我使用一个带有一组数字的数组,例如“thearray=[2,8,9]”并循环该数组,对于数组中的每个数字项,例如“2,8,9”,代码调用函数的次数等于数组中当前数字项的次数。因此,如果当前数字项为2,则函数将被调用两次 在一组调用之后,会有一个暂停,然后再次调用该函数的次数等于数组中的当前数字等。换句话说,当数组循环时,如果当前数字项为2,则将调用名为“thefunction”的函数两次,然后会有一个暂停和函数“thefunction”然后再次调用的次数等于数组中的下一个数字 在我
function runArray(arr, fn) {
// initialize array index - can't use for loop here with async
var index = 0;
function next() {
var cnt = +arr[index];
for (var i = 0; i < cnt; i++) {
fn(index, cnt);
}
// increment array index and see if there's more to do
++index;
if (index < arr.length) {
setTimeout(next, 400);
}
}
// start the whole process if the array isn't empty
if (arr.length) {
next();
}
}
runArray(thearray, shakeit);
函数runArray(arr,fn){
//初始化数组索引-不能用于异步的循环
var指数=0;
函数next(){
var cnt=+arr[指数];
对于(变量i=0;i
下面是一个JSFIDLE演示了一个快速添加信息的日志。我想让它慢下来,这样信息添加的速度就足够慢,以使它明显地有一个序列
实际上,您想要做的是在执行
for
循环之间插入一个延迟。在JavaScript中引入延迟的唯一合理方法是使用setTimeout
和setInterval
,因此这就是您必须处理的问题
下一个想法是,由于每个循环迭代都是作为对setTimeout
和friends的回调来实现的,因此在每个循环完成后移动到下一个数组元素的逻辑必然是其中的一部分——在循环完成之前,不能移动到下一个元素
但是移动到下一个元素的逻辑已经在next
中,我们已经确定next
应该设置回调。所以next
将安排回调,回调也将安排next
——没有其他方法
因此:
function runArray(arr, fn, delay) {
var index = 0;
var cnt = 0;
var i = 0;
// Called once for each array element
function next() {
if (index >= arr.length) {
return;
}
cnt = +arr[index];
i = 0;
loop();
}
// Represents a single iteration of what was previously a for loop
// Will either schedule the next iteration or move to the next element
function loop() {
if (i < cnt) {
fn(index, i++);
setTimeout(loop, delay); // delay before next iteration
}
else {
++index;
setTimeout(next, delay); // delay before moving to next element
}
}
if (arr.length) {
next();
}
}
函数运行数组(arr、fn、延迟){
var指数=0;
var-cnt=0;
var i=0;
//为每个数组元素调用一次
函数next(){
如果(索引>=arr.length){
返回;
}
cnt=+arr[指数];
i=0;
loop();
}
//表示以前是for循环的单个迭代
//将计划下一个迭代或移动到下一个元素
函数循环(){
if(i
我在“循环迭代”之间以及在循环结束和下一个循环开始之间保持相同的延迟
,但这很容易改变
我可能理解,也可能不理解您试图做什么,但是使用这段代码
runArray(theArray, theFunction, 400);
您正在执行数组,函数将在400毫秒后发生,1000是1秒,因此,如果您希望它是一个更大的暂停,请增加400,这里我将它增加到4000(4秒),暂停会更明显
除非我误解了什么
function runArray(arr, fn, delay, idx, cnt) {
idx = idx || 0;
cnt = cnt || 0;
if(cnt >= arr[idx]) {
idx++;
cnt = 0;
}
if(idx >= arr.length)
return;
fn(idx, cnt);
setTimeout(function() { runArray(arr, fn, delay, idx, cnt + 1) }, delay);
}
Ah简单的解决方案。非常感谢。我的脑子太累了,想不出来。