如何使用 sleep/delay 遍历 javascript 数组？

Question

我试图在一个地理位置设置视图和标记，然后 delay/sleep 在另一个位置设置标记。我正在使用 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);

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

Answer 1

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

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

然后直接插入await delay(1000)等待一秒

Answer 2

您可以使用带有 setTimeout 的递归函数调用来耗尽数据数组，而不是使用 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();

如何使用 sleep/delay 遍历 javascript 数组？

How to iterate through javascirpt array with a sleep/delay?

javascript

leaflet