当我在 for 循环中使用它时,setTimeout 只运行一次

setTimeout only runs once when i use it inside a for loop

我正在尝试对一些信息进行冒泡排序(通过询问用户他们更喜欢哪个而不是比较) 当我在回调函数中使用 settimeout 时,它只在 for 循环的第一级运行一次。 (s通过点击图像改变 这是我们传递给它一个数组作为参数的主要功能

function bubble_Sort(a)
{
    var swapp;
    var n = a.length-1;
    var x=a;
    do {
        swapp = false;



        for (var i=0; i < n; i++)
        {
            s=0;
            limage.setAttribute('src','images/'+x[i]+'.jpg');
            rimage.setAttribute('src','images/'+x[i+1]+'.jpg');
            console.log('images changed');
            check(i,function(){
                if (s==0)
                {
                   var temp = x[i];
                   x[i] = x[i+1];
                   x[i+1] = temp;
                   swapp = true;
                }

            });
        }


        n--;
    } while (swapp);
 return x; 
}

这里是检查函数(回调等待用户点击其中一张图片)


var check=function(p,callback){
    setTimeout(function(){console.log('this is Timeout');},3000);
    callback();
}

您不需要设置超时函数来实现此类功能,您的代码必须等待点击(异步)事件才能继续计算。可以在generator functions的帮助下得到你想要的。 这是一个简单的工作示例,代码大部分是自我描述的,希望对您有所帮助!

// a generator function
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/yield
function* bubbleSort(items) {
  var length = items.length;
  for (var i = 0; i < length; i++) {
    for (var j = 0; j < (length - i - 1); j++) {
      firstImageIndex = j;
      secondImageIndex = j + 1;
      updateUI(); //magic happens here
      shouldBeSwapped = yield i; // wait for user to select a picture (no set timeout here)
      if (shouldBeSwapped) {
        let tmp = items[j];
        items[j] = items[j + 1];
        items[j + 1] = tmp;
      }
    }
  }
  updateUI(); // final update
}

Codepen Link Here !