簡單的JavaScript互斥鎖分享
去年有幾個項目需要使用JavaScript互斥鎖，所以寫了幾個類似的，這是其中一個：
//Published by Indream Luo
//Contact: indreamluo@qq.com
//Version: Chinese 1.0.0
!function ($) {
window.indream = window.indream || {};
$.indream = indream;
indream.async = {
//
//鎖
//lock: 鎖的編號
//action: 解鎖后執(zhí)行的方法
//
lock: function (lock, action) {
$.indream.async.waitings[lock] = $.indream.async.waitings[lock] || [];
$.indream.async.waitings[lock].push(action);
//如果該鎖未被使用，則當(dāng)前action阻塞該鎖
if (!$.indream.async.lockStatus[lock] && action) {
$.indream.async.lockStatus[lock] = true;
if (arguments.length > 2) {
var args = 'arguments[2]';
for (var i = 3; i < arguments.length; i++) {
args += ', arguments[' + i + ']';
}
eval('$.indream.async.action.call(action, ' + args + ')');
} else {
$.indream.async.action.call(action);
}
}
},
//
//解鎖
//lock: 鎖的編號
//
releaseLock: function (lock) {
$.indream.async.waitings[lock].shift();
//如果等待隊列有對象，則執(zhí)行等待隊列，否則解鎖
if ($.indream.async.waitings[lock].length) {
$.indream.async.waitings[lock][0]();
} else {
$.indream.async.lockStatus[lock] = false;
}
},
//
//鎖的狀態(tài)
//
lockStatus: [],
//
//等待事件完成
//lock:鎖編碼，相同的編碼將被整合成一個序列，觸發(fā)時同時觸發(fā)
//
wait: function (lock, action) {
$.indream.async.waitings[code] = $.indream.async.waitings[code] || [];
$.indream.async.waitings[code].push(action);
},
//
//等待序列
//
waitings: [],
//
//數(shù)據(jù)緩存
//
action: {
//
//監(jiān)聽和回調(diào)的相關(guān)方法
//
callback: {
//
//監(jiān)聽
//
listen: function (actionName, callback) {
var list = $.indream.async.action.callback.list;
list[actionName] = list[actionName] || [];
list[actionName].push(callback);
},
//
//回調(diào)
//
call: function (actionName, args) {
var list = $.indream.async.action.callback.list;
if (list[actionName] && list[actionName].length) {
for (var i in list[actionName]) {
$.indream.async.action.call(list[actionName][i], args);
}
}
},
//
//現(xiàn)有的回調(diào)列表
//
list: []
},
//
//根據(jù)方法是否存在和參數(shù)是否存在選擇適當(dāng)?shù)膱?zhí)行方式
//
call: function (action) {
if (action) {
if (arguments.length > 1) {
var args = 'arguments[1]';
for (var i = 2; i < arguments.length; i++) {
args += ', arguments[' + i + ']';
}
eval('action(' + args + ')');
} else {
action();
}
}
}
}
}
}(window.jQuery);
一個互斥鎖的幾個元素是：
•鎖與解鎖
•等待隊列
•執(zhí)行方法
以上鎖的用法：
//定義鎖的名稱
var lock = 'scrollTop()';
//使用鎖
$.indream.async.lock(lock, function () {
var scrollTop = $(window).scrollTop();
var timer;
var fullTime = 100;
for (timer = 0; timer <= fullTime; timer += 10) {
setTimeout('$(window).scrollTop(' + (scrollTop * (fullTime - timer) / fullTime) + ');', timer);
}
//釋放鎖
setTimeout('$.indream.async.releaseLock("' + lock + '");', fullTime);
});
關(guān)于這次所的實現(xiàn)，簡單說明下。
-自旋鎖還是信號量
JavaScript本身沒有鎖的功能，所以做的鎖都是在高層實現(xiàn)的。
依據(jù)JavaScript單線程的原理，JS的線程資源十分有限，非常不適合使用自旋鎖，所以選擇了使用信號量。
自旋鎖實現(xiàn)起來的樣子大致是這樣的，當(dāng)然do while更多用了：
while(true) {
//do something...
}
這樣必然需要占滿線程資源，可惜JS只有一條線程可以用來執(zhí)行，所以這樣做十分不適用。當(dāng)然，有需要可以選擇setInterval和clearInterval的組合去實現(xiàn)，效果也會不錯。
這里選用了信號量的方式，原理也簡單，就如代碼那么短。工作的執(zhí)行順序大致是：
•把代碼段（回調(diào)的action）推入等待隊列
•判斷當(dāng)前鎖是否被持有，如果被持有則等待釋放，否則獲取該鎖，執(zhí)行回調(diào)
•當(dāng)鎖被釋放，則在等待隊列中shift出下一個回調(diào)，將鎖傳遞給它并執(zhí)行
-自動釋放還是手動釋放
看起來最舒服的方式當(dāng)然是鎖住之后當(dāng)當(dāng)前程序執(zhí)行完就自動釋放，不過這樣并不容易，因為有更多的情況需要自定義釋放場景。
本身使用鎖的就是在異步中的方法，所以各種通常也會出現(xiàn)其他異步內(nèi)容，比如AJAX、jQuery動畫。這個時候，自動釋放就不符合需求了，因為實際上真正的“執(zhí)行完畢”是在它內(nèi)部的異步回調(diào)完成后，也就是基本上只有開發(fā)人員自己能把握，所以這里選擇了手釋放。
不過還是有缺陷的，就是重復(fù)釋放。
可以看到所有的鎖的對象都是公有的，或者應(yīng)該說JS所有對象都是公有的，除非使局部變量在訪問級別上進行隔離。不過這里“鎖”本身就是個公共資源，所以沒辦法處理。
這里可以做的優(yōu)化應(yīng)該是像setInterval和clearInterval的那樣，以公共的鎖名稱進行加鎖，以私有的鎖ID進行解鎖，就可以防止重復(fù)釋放了。不過上面這段老代碼中沒有，估計很快就會用到的了。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了JS實現(xiàn)輪播圖小案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
JavaScript實現(xiàn)頁面實時顯示當(dāng)前時間的簡單實例
這篇文章介紹了頁面實時顯示當(dāng)前時間的簡單實例，有需要的朋友可以參考需要2013-07-07
npm install報錯無法創(chuàng)建packge.json文件的解決辦法
當(dāng)你在運行 npm install 時遇到錯誤,提示無法找到 package.json 文件,也沒有創(chuàng)建一個 package.json 文件,只創(chuàng)建了一個package-lock.json文件,本文給大家介紹詳細(xì)的解決辦法,需要的朋友可以參考下2024-02-02
在瀏覽器上打印應(yīng)該一個比較常見的操作, 最簡單的打印方式就是直接點擊瀏覽器右上角,找到“打印”按鈕或者調(diào)用window.print(), 然而,實際情況下大多數(shù)需求都不會如此簡單,所以本文給大家介紹了使用JS自定義打印及靜默打印的方法實現(xiàn),需要的朋友可以參考下2024-01-01
JavaScript實現(xiàn)兩個Table固定表頭根據(jù)頁面大小自行調(diào)整
正如標(biāo)題所言兩個Table固定表頭，可根據(jù)頁面大小自行調(diào)整使用JavaScript實現(xiàn)，具體的示例如下，感興趣的朋友可以參考下2014-01-01
easyui combobox開啟搜索自動完成功能的實例代碼
下面小編就為大家?guī)硪黄猠asyui combobox開啟搜索自動完成功能的實例代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
在ECharts中,可以通過設(shè)置數(shù)據(jù)的順序來控制柱狀圖的排序,本文就介紹了echarts實現(xiàn)排名柱狀圖的示例代碼,具有一定的參考價值,感興趣的可以了解一下2023-09-09
以前寫的一個解析QueryString的JS類，可以獲取或設(shè)置QueryString中的值，記下了方便找 :)2010-01-01
這篇文章主要介紹了JS實現(xiàn)隨機生成10個手機號的方法,涉及javascript數(shù)值運算與隨機數(shù)操作相關(guān)使用技巧,需要的朋友可以參考下2018-12-12
JavaScript在for循環(huán)中綁定事件解決事件參數(shù)不同的情況
響應(yīng)一堆相似的事件，但是每個事件的參數(shù)都不同，在這種情況下就可以使用JavaScript 在for循環(huán)中綁定事件，下面有個不錯的示例，大家可以參考下2014-01-01