Question

嗨，我陷入了一个简单的问题。我需要在我尝试过setTimeout的对象循环中添加一些延迟，但是它不起作用。下面是我当前的代码

代码

$.each(calanderData, function(key, valueObj) {
    setTimeout(function() { 
        if (key == 'Cover') {
            col = 12;
        } else {
            col = 6;
        }

        canvasFront.loadFromJSON(calanderData['' + key + ''], canvasFront.renderAll.bind(canvasFront));

        preview = canvasFront.toDataURL();

        $('#calander-preview-modal').append('<div class="mb-4 col-md-' + col + '"><img width="100%" src="' + preview + '"><h6>' + key + '</h6></div>');

    }, 3000);
});

Answer 1

检查此解决方案：

calanderData = {
  'id1': 1,
  'Cover': 2,
  'id2': 3,
  'id3': 4,
}

var step = 3000;
var timeout = 0;
$.each(calanderData, function(key, valueObj) {
  setTimeout(function() {
    if (key == 'Cover') {
      col = 12;
    } else {
      col = 6;
    }

    preview = 'https://via.placeholder.com/150';

    $('#calander-preview-modal').append('<div class="mb-4 col-md-' + col + '"><img width="100%" src="' + preview + '"><h6>' + key + '</h6></div>');
  }, timeout);

  timeout += step;
});

#calander-preview-modal div {
  width: 100px !important;
  float: left !important;
  margin-left: 10px !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="calander-preview-modal"></div>

Answer 2

您在程序逻辑上有误

这将使其具有延迟，但会产生错误的错误值：

var numberCounterEach = 0;
$.each(calanderData, function(key, valueObj) {
    numberCounterEach++;
    setTimeout(function() { 
        if (key == 'Cover') {
            col = 12;
        } else {
            col = 6;
        }

        canvasFront.loadFromJSON(calanderData['' + key + ''], canvasFront.renderAll.bind(canvasFront));

        preview = canvasFront.toDataURL();

        $('#calander-preview-modal').append('<div class="mb-4 col-md-' + col + '"><img width="100%" src="' + preview + '"><h6>' + key + '</h6></div>');

    }, numberCounterEach*3000);
});

因此您需要实现函数关闭：

function delayedActionExecute(delay, key, valueObj) {
    setTimeout(function() { 
        if (key == 'Cover') {
            col = 12;
        } else {
            col = 6;
        }

        canvasFront.loadFromJSON(calanderData['' + key + ''], canvasFront.renderAll.bind(canvasFront));

        preview = canvasFront.toDataURL();

        $('#calander-preview-modal').append('<div class="mb-4 col-md-' + col + '"><img width="100%" src="' + preview + '"><h6>' + key + '</h6></div>');

    }, delay);
}

var numberCounterEach = 0;
$.each(calanderData, function(key, valueObj) {
    numberCounterEach++;
    delayedActionExecute(numberCounterEach*3000, key, valueObj);
});

但是您肯定需要修复变量范围的更多错误：例如全局col和不可见的内部变量

Answer 3

这是我的解决方案：

let calendarData = {
  key1: 1,
  key2: 2
};

let i = 0;

(function loop() {
  setTimeout(function() {
    //your logic here
    i++;
    if(i < Object.keys(calendarData).length) {
      loop();
    }
  },3000);
})();

JSFiddle：https://jsfiddle.net/tdv5j67f/23/

在对象循环中添加延迟

3 个答案: