去年有幾個項目需要使用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);//如果該鎖未被使用，則當前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)聽和回調的相關方法//callback: {////監(jiān)聽//listen: function (actionname, callback) {var list = $.indream.async.action.callback.list;list[actionName] = list[actionName] || [];list[actionName].push(callback);},////回調//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)有的回調列表//list: []},////根據(jù)方法是否存在和參數(shù)是否存在選擇適當?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); });

關于這次鎖的實現(xiàn)，簡單說明下.

-自旋鎖還是信號量

JavaScript本身沒有鎖的功能，所以做的鎖都是在高層實現(xiàn)的。

依據(jù)JavaScript單線程的原理，JS的線程資源十分有限，非常不適合使用自旋鎖，所以選擇使用信號量。

自旋鎖實現(xiàn)起來的樣子大致是這樣的，當然do while更多用了：

while (true) {//do something... }

這樣必然需要占滿線程資源，可惜JS只有一條線程可以用來執(zhí)行，所以這樣做十分不適用。當然有需要可以選擇setInterval和clearInterval的組合去實現(xiàn)，效果也會不錯。

這里選用了信號量的方式，原理也簡單，就如代碼那么短。工作的執(zhí)行順序大致是:

• 把代碼段(回調的action)推入等待隊列
• 判斷當前鎖是否被持有，如果被持有則等待釋放，否則獲取該鎖，執(zhí)行回調
• 當鎖被釋放，則在等待隊列中shift出下一個回調，將鎖傳遞給它并執(zhí)行

?

-自動釋放還是手動釋放

看起來最舒服的方式當然是鎖住之后當當前程序執(zhí)行完就自動釋放，不過這樣并不容易，因為有更多的情況需要自定義釋放場景。

本身使用鎖的就是在異步中的方法，所以各種通常也會出現(xiàn)其他異步內(nèi)容，比如AJAX、jQuery動畫。這個時候，自動釋放就不符合需求了，因為實際上真正的“執(zhí)行完畢”是在它內(nèi)部的異步回調完成后，也就是基本上只有開發(fā)人員自己能把握，所以這里選擇了手釋放。

不過還是有缺陷的，就是重復釋放。

可以看到所有的鎖的對象都是公有的，或者應該說JS所有對象都是公有的，除非使局部變量在訪問級別上進行隔離。不過這里"鎖"本身就是個公共資源，所以沒辦法處理。

這里可以做的優(yōu)化應該是像setInterval和clearInterval的那樣，以公共的鎖名稱進行加鎖，以私有的鎖ID進行解鎖，就可以防止重復釋放了。不過上面這段老代碼中沒有，估計很快就會用到的了。

?

總結

以上是生活随笔為你收集整理的简单的JavaScript互斥锁的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。