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

如果你只是想以一个定时的速度迭代图像网址数组，你可以做这样的事情，间隔为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);

当我每隔N秒将src附加到图像时出错了

2 个答案: