如何使用睡眠/延迟遍历 javascirpt 数组？

Question

我正在尝试在一个地理位置设置视图和标记，并在延迟/睡眠后将标记设置在另一个位置。 我正在使用 leaflet.js。 有一个数据数组

[
    {
        "city": "City_1",
        "lat": 8.702127234287211,
        "lon": 77.1684975438538,
        "temp": 25,
        "icon": "🥑"
    },
    {
        "city": "City_2",
        "lat": 9.083099761723636, 
        "lon": 74.81806072890778, 
        "temp": 0,
        "icon": "🥦"
    }
]

并在按钮上单击数据被读取并循环。 尝试setInterval()没有成功。

const startUpdating = async () => {    
    const response = await fetch('data.json');
    const data = await response.json();
    const marker = L.marker();// init marker

    for (i of data) {
        // Tried setInterval(setView, 1000); // no success.
        await map.setView([i.lat, i.lon], 10);
        marker.setLatLng([i.lat, i.lon]).addTo(map);
    }
}
startBtn.addEventListener('click', startUpdating);

那么如何设置延迟以便从数组中读取数据，设置标记并在 map 上查看，等待一段时间然后再次迭代。

Answer 1

幸运的是，您已经处于async上下文中。 setTimeout很容易承诺：

function delay(time) {
  return new Promise(resolve => setTimeout(resolve, time));
}

然后只需插入await delay(1000)等待一秒钟。

Answer 2

您可以使用带有 setTimeout 的递归 function 调用来耗尽您的数据数组，而不是使用 for 循环，它应该看起来像这样。

const response = await fetch('data.json');
const data = await response.json();
// ... some other codes
const setNext = () => {
  if (data.length) {
    const item = data.shift();
    // ... set you marker here    
  }

  if (data.length) {
    setTimeout(setNext, 1000);
  }
};
setNext();