Добавление таймаута в цикл for

Question

Я пытаюсь добавить задержку для цикла for.В настоящее время он просматривает местоположения в переменной и размещает в нем маркер для всех.Работает нормально, но хотелось бы показать их с небольшой задержкой.Я пытаюсь использовать функцию setTimeOut, но когда я ее добавляю, она не может загрузить данные?

Цикл, работающий до добавления тайм-аута:

 for (var i = 0; i < data.length; i++) {
        if (data[i].lat != null) {
        markers[data[i].username]= new L.marker([data[i].lat, data[i].lng], { bounceOnAdd: true,draggable: true, icon: redIcon });
        map.addLayer(markers[data[i].username]);
        markers[data[i].username].bindPopup('Online :' + data[i].username);
      }

А что не работает с тайм-аутомдобавлено.

 for (var i = 0; i < data.length; i++) { setTimeout(function () {
        if (data[i].lat != null) {
        markers[data[i].username]= new L.marker([data[i].lat, data[i].lng], { bounceOnAdd: true,draggable: true, icon: redIcon });
        map.addLayer(markers[data[i].username]);
        markers[data[i].username].bindPopup('Online :' + data[i].username);
      }, 3000); 
      } 

Answer 1

Возможно, вы могли бы обернуть логику создания маркера в метод async, как показано ниже?

Сделав это, вы можете продолжить использовать конструкцию for-loop, как в настоящее время, и затем представитьзадержка между созданием маркеров через:

await new Promise(resolve => setTimeout(resolve, 3000))

Используя этот шаблон, ваш код будет выглядеть примерно так:

async function processData(data) {

  for(var i = 0; i < data.length; i++) {
  
    console.log(`waiting 3000 ms`);

    // Delay creation of marker for data[i] by 3 seconds
    await new Promise(resolve => setTimeout(resolve, 3000));

    // Create new marker from data[i]
    const marker = data[i];

    console.log(`create new marker from item: ${ marker }`);

    /*
    markers[data[i].username]= new L.marker([
        data[i].lat, data[i].lng
    ], { 
        bounceOnAdd: true,
        draggable: true, 
        icon: redIcon 
    });

    map.addLayer(markers[data[i].username]);
    markers[data[i].username].bindPopup('Online :' + data[i].username);
    */
  }
}

processData([1,2,3,4])

Answer 2

Вместо использования цикла используйте функцию с setTimeout.Он строит маркер, используя данные в первом элементе, затем снова вызывает функцию с остальной частью массива.

const data = [0, 1, 2, 3, 4, 5];

function plotMarker(data) {
  const [head, ...rest] = data;
  if (data.length) {

    // plot your marker
    console.log(head);
    setTimeout(() => plotMarker(rest), 1000);
  }
}

plotMarker(data);