javascript - 当我每 N 秒每次迭代将 src 附加到图像时出现问题

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>