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

使用带有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);

Answer 2

也许您可以将标记创建逻辑包装在async方法中，如下所示？

这样做，您可以继续使用当前的for循环结构，然后通过以下方式在创建标记之间引入延迟：

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])

向for循环添加超时

2 个答案: