前言
Web Locks相關的API目前還是實驗性質的，這意味著未來可能有所變動，會與本片內容提及用法、作用有差異。雖然是實驗性質，但目前主流瀏覽器都已經支援。
使用方式
最基本用法是透過navigator.locks.request()取得一把鎖，如果無法取得就必須等待直到能夠取得。如果取得了，就可以執行後續callback的動作。通常callback是一個異步函式，舉例來說寫法會如下：
navigator.locks.request('lock-1', async (lock) => {
console.log('get lock-1');
console.log('do something');
console.log('release lock-1');
});
callback的執行區域，被稱作是 關鍵區域 (Critical section)。
如果設計的恰當，關鍵區域只會有一個在執行。把上面再改寫一下：
var lock_name = 'lock-1';
navigator.locks.request(lock_name, (lock) => {
console.log(`A: get lock ${lock.name}`);
return new Promise(res => {
/// 10秒後釋放鎖
setTimeout(() => {
console.log(`A: release lock ${lock.name}`);
res(); // release lock
}, 10000 /*ms*/);
})
})
navigator.locks.request(lock_name, (lock) => {
console.log(`B: get lock ${lock.name}`);
return new Promise(res => {
/// 5秒後釋放鎖
setTimeout(() => {
console.log(`B: release lock ${lock.name}`);
res(); // release lock
}, 5000 /*ms*/);
})
})
A: get lock lock-1
A: release lock lock-1
B: get lock lock-1
B: release lock lock-1
在上面範例，有兩個程式區塊A和B需要使用到lock-1這把鎖。A需要消耗10秒，並優先取得了鎖；B必須等待10秒後，才會開始執行。
可以透過將Promise的resolve()或reject()傳遞出來，來決定什麼時候要釋放鎖：