JavaScript Sleep SetTimeout 非同步處理方法

2023-08-27 157 words One minute

https://user-images.githubusercontent.com/6058558/263536210-c18848cc-49d0-45c8-a4cf-50c0a5e7953f.png

Contents

最近有一個情境，同一頁使用者會有持續呼叫API方法，但需要控制按鈕等前一個API呼叫，減少併發發生狀況，這邊就找了方法排除，有找到使用 sleep 方法去解決這個問題。

重點絲路

因為重點很少，就不寫心智圖。

利用 Promise 裡面包住 setTimeout 方法去做呼叫，這邊外面可以用 Promise 去做非同步處理，可以用 await搭配使用，這樣就可以等待時間到才開始執行下面程式。要等多的非同步可以用Promise.all 方法去搭配 await 去判斷。

sleep 非同步

透過 Promise 可以做到非同步處理。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10



function timeout(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}
async function sleep(fn, ...args) {
 
    return fn(...args);
}

sleep(()=>alert('test'));

模擬防止併發 AJAX 情境

透過 Promise 特性，使用全域變數抓 Promise 變數，前面加上 await 就能阻擋這個情境。執行 Run Ajax

Note: timeout 方法這邊模擬當作抓資料時間，實際可以用 axios 做替換。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


<script>
var a;
function timeout(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}
async function sleep(fn, ...args) {
    await a;
    return fn(...args);
}

</script>
<button onclick="a=timeout(3000);">Run AJAX</button>
<button onclick="this.onclick=null;sleep(()=>{alert('test');location.href='.';});">After AJAX ,it is  alert </button>

Info

這邊使用情境是用一個 Promise ，這邊假如有多隻API要等的話可以用Promise.all，這邊以前不知道這個情境可以用在哪裡，經過這個情境大概知道要怎麼用。

參考資料

彩蛋

javascript - How to make onclick event to work only once - Stack Overflow