当我将src附加到图像时，每N秒迭代一次

Question

当我使用javascript代码执行此操作时出现问题

 function sleep(delay) {
        var start = new Date().getTime();
        while (new Date().getTime() < start + delay);
    }
    //submit data with jQuery AJAX
    function onSuccess(data) {
        var millisecondsToWait = $("#range").val() * 1000;
        obj= JSON.parse(data)
        for (var x of obj.Images_Url)
        {
            $("#left_image").attr('src', x.Item1);
            $("#right_image").attr('src', x.Item2);
            sleep(millisecondsToWait);
        }

所以只执行obj.Images_Url中的最后一项，其他都不是

例如，

假设json字符串为

"Images_Url":[{"Item1":"url1","Item2":"url2"},{"Item1":"url3","Item2":"url4"},{"Item1":"url5","Item2":"url6"}]

只出现url5和url6的图像我不知道为什么会这样但我认为浏览器或渲染挂起，因为我不使用任何线程或任务，所以请任何人有任何想法如何修复这个

Answer 1

呈现发生在执行队列清空时，也就是代码运行到完成时。因此，您将只看到最后2个图像。

你可以这样做:

let numbersToShow = [1, 2, 3, 4, 5, 6, 7],
    left = document.getElementById('left'),
    right = document.getElementById('right');
showNumbersByPairAtInterval(numbersToShow, 2000);
function showNumbersByPairAtInterval(numbersToShow, interval, index) {
  index = index || 0;
  
  let slice = numbersToShow.slice(index, index + 2),
      nextIndex = index + 2;
  
  left.textContent = slice[0];
  right.textContent = slice[1];
  
  if (nextIndex <= numbersToShow.length - 1) {
      setTimeout(showNumbersByPairAtInterval.bind(
          null, 
          numbersToShow, 
          interval, 
          nextIndex
      ), 2000);
  }
}

<span id="left"></span>
<span id="right"></span>

Answer 2

如果你只是想以定时的速度迭代图像url的数组，你可以这样做，这将是1秒的间隔:

var obj = JSON.parse(data);
var k = 0;
var total = obj.Images_Url.length;
setInterval(function () {
    if (k < total) {
        $("#left_image").attr('src', obj.Images_Url[k].Item1);
        $("#right_image").attr('src', obj.Images_Url[k].Item2);
        k++;
    }
}, 1000);