如何使用睡眠/延遲遍歷 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();