blocks|key|747897|text|在JS中，锁是一个值得怀疑的想法，它旨在成为无线程的，并且不需要并发保护。您希望组合延迟执行上的调用。我遵循的模式是使用回调。如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|747898|var+functionLock+=+false;
var+functionCallbacks+=+[];
var+lockingFunction+=+function+(callback)+{
++++if+(functionLock)+{
++++++++functionCallbacks.push(callback);
++++}+else+{
++++++++$.longRunning(function(response)+{
+++++++++++++while(functionCallbacks.length){
+++++++++++++++++var+thisCallback+=+functionCallbacks.pop();
+++++++++++++++++thisCallback(response);
+++++++++++++}
++++++++});
++++}
}|code-block|syntax|javascript|747899|您也可以使用DOM事件侦听器或pubsub解决方案来实现这一点。|747900|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Lock is a questionable idea in JS which is intended to be threadless and not needing concurrency protection. You're looking to combine calls on deferred execution. The pattern I follow for this is the use of callbacks. Something like this:

<pre><code>var functionLock = false;
var functionCallbacks = [];
var lockingFunction = function (callback) {
 if (functionLock) {
 functionCallbacks.push(callback);
 } else {
 $.longRunning(function(response) {
 while(functionCallbacks.length){
 var thisCallback = functionCallbacks.pop();
 thisCallback(response);
 }
 });
 }
}
</code></pre>

You can also implement this using DOM event listeners or a pubsub solution.

blocks|key|963663|text|为什么不禁用该按钮，并在完成事件后启用它？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|963664|<input+type="button"+id="xx"+onclick="checkEnableSubmit('true');yourFunction();">

<script+type="text/javascript">

function+checkEnableSubmit(status)+{++
++document.getElementById("xx").disabled+=+status;
}

function+yourFunction(){

//add+your+functionality

checkEnableSubmit('false');
}

</script>|code-block|syntax|javascript|963665|编码快乐！|963666|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Why don't you disable the button and enable it after you finish the event?



<pre class="lang-js prettyprint-override"><code>&lt;input type="button" id="xx" onclick="checkEnableSubmit('true');yourFunction();"&gt;

&lt;script type="text/javascript"&gt;

function checkEnableSubmit(status) { 
 document.getElementById("xx").disabled = status;
}

function yourFunction(){

//add your functionality

checkEnableSubmit('false');
}

&lt;/script&gt;
</code></pre>

Happy coding !!!

blocks|key|747966|text|锁是多线程系统中需要的一个概念。即使使用工作线程，消息也是按值在工作线程之间发送的，因此不需要锁定。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|747967|我怀疑你只需要在你的按钮之间设置一个信号量(标志系统)。|747968|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

Locks are a concept required in a multi-threaded system. Even with worker threads, messages are sent by value between workers so that locking is unnecessary.

I suspect you need to just set a semaphore (flagging system) between your buttons.

blocks|key|963751|text|根据我的情况，对JoshRiver的回答做了一些补充；|type|unstyled|depth|inlineStyleRanges|entityRanges|data|963752|var+functionCallbacks+=+[];
++++var+functionLock+=+false;
++++var+getData+=+function+(url,+callback)+{
+++++++++++++++++++if+(functionLock)+{
++++++++++++++++++++++++functionCallbacks.push(callback);
+++++++++++++++++++}+else+{
+++++++++++++++++++++++functionLock+=+true;
+++++++++++++++++++++++functionCallbacks.push(callback);
++++++++++++++++++++++++$.getJSON(url,+function+(data)+{
++++++++++++++++++++++++++++while+(functionCallbacks.length)+{
++++++++++++++++++++++++++++++++var+thisCallback+=+functionCallbacks.pop();
++++++++++++++++++++++++++++++++thisCallback(data);
++++++++++++++++++++++++++++}
++++++++++++++++++++++++++++functionLock+=+false;
++++++++++++++++++++++++});
++++++++++++++++++++}
++++++++++++++++};

//+Usage
getData("api/orders",function(data){
++++barChart(data);
});
getData("api/orders",function(data){
++lineChart(data);
});|code-block|syntax|javascript|963753|将只有一个api调用，并且这两个函数将使用相同的结果。|963754|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Some addition to JoshRiver's answer according to my case;

<pre><code>var functionCallbacks = [];
 var functionLock = false;
 var getData = function (url, callback) {
 if (functionLock) {
 functionCallbacks.push(callback);
 } else {
 functionLock = true;
 functionCallbacks.push(callback);
 $.getJSON(url, function (data) {
 while (functionCallbacks.length) {
 var thisCallback = functionCallbacks.pop();
 thisCallback(data);
 }
 functionLock = false;
 });
 }
 };

// Usage
getData("api/orders",function(data){
 barChart(data);
});
getData("api/orders",function(data){
 lineChart(data);
});
</code></pre>

There will be just one api call and these two function will consume same result.

blocks|key|963805|text|我已经成功了，mutex-promise。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|963806|我同意其他答案，即在您的案例中可能不需要锁定。但这并不是说在Javascript中永远不需要锁定。在访问不处理并发的外部资源时，您需要互斥。|963807|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/kirill-konshin/mutex-promise^0|7|D|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]]|C|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]]]

I've had success <a href="https://github.com/kirill-konshin/mutex-promise" rel="noreferrer">mutex-promise</a>.

I agree with other answers that you might not need locking in your case. But it's not true that one never needs locking in Javascript. You need mutual exclusivity when accessing external resources that do not handle concurrency.

blocks|key|963825|text|锁在JS中仍然有用处。根据我的经验，我只需要使用锁来防止垃圾邮件点击发出AJAX调用的元素。如果您已经为AJAX调用设置了加载器，那么这就不是必需的(以及在单击后禁用按钮)。但无论哪种方式，这里都是我用来锁定的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|963826|var+LOCK_INDEX+=+[];
function+LockCallback(key,+action,+manual)+{
++++if+(LOCK_INDEX[key])
++++++++return;
++++LOCK_INDEX[key]+=+true;
++++action(function+()+{+delete+LOCK_INDEX[key]+});
++++if+(!manual)
++++++++delete+LOCK_INDEX[key];
}|code-block|syntax|javascript|963827|用法：|963828|手动解锁(通常用于XHR)|963829|LockCallback('someKey',(delCallback)+=>+{+
++++//do+stuff
++++delCallback();+//Unlock+method
},+true)|963830|自动解锁|963831|LockCallback('someKey',()+=>+{+
++++//do+stuff
})|963832|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|V|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|W|8|@]|9|@]|A|$E|F]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|D|7|Y|8|@]|9|@]|A|$E|F]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

Locks still have uses in JS. In my experience I only needed to use locks to prevent spam clicking on elements making AJAX calls.
If you have a loader set up for AJAX calls then this isn't required (as well as disabling the button after clicking).
But either way here is what I used for locking:
<pre><code>var LOCK_INDEX = [];
function LockCallback(key, action, manual) {
 if (LOCK_INDEX[key])
 return;
 LOCK_INDEX[key] = true;
 action(function () { delete LOCK_INDEX[key] });
 if (!manual)
 delete LOCK_INDEX[key];
}
</code></pre>
Usage:
Manual unlock (usually for XHR)
<pre><code>LockCallback('someKey',(delCallback) =&gt; { 
 //do stuff
 delCallback(); //Unlock method
}, true)
</code></pre>
Auto unlock
<pre><code>LockCallback('someKey',() =&gt; { 
 //do stuff
})
</code></pre>

blocks|key|748111|text|下面是一个简单的锁机制，通过闭包实现|type|unstyled|depth|inlineStyleRanges|entityRanges|data|748112|​|748113|const+createLock+=+()+=>+{

++++let+lockStatus+=+false

++++const+release+=+()+=>+{
++++++++lockStatus+=+false
++++}

++++const+acuire+=+()+=>+{
++++++++if+(lockStatus+==+true)
++++++++++++return+false
++++++++lockStatus+=+true
++++++++return+true
++++}
++++
++++return+{
++++++++lockStatus:+lockStatus,+
++++++++acuire:+acuire,
++++++++release:+release,
++++}
}

lock+=+createLock()+//+create+a+lock
lock.acuire()+//+acuired+a+lock

if+(lock.acuire()){
++console.log("Was+able+to+acuire");
}+else+{
++console.log("Was+not+to+acuire");+//+This+will+execute
}

lock.release()+//+now+the+lock+is+released

if(lock.acuire()){
++console.log("Was+able+to+acuire");+//+This+will+execute
}+else+{
++console.log("Was+not+to+acuire");+
}

lock.release()+//+Hey+don't+forget+to+release|code-block|syntax|javascript|748114|748115|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

Here's a simple lock mechanism, implemented via closure
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>const createLock = () =&gt; {

 let lockStatus = false

 const release = () =&gt; {
 lockStatus = false
 }

 const acuire = () =&gt; {
 if (lockStatus == true)
 return false
 lockStatus = true
 return true
 }
 
 return {
 lockStatus: lockStatus, 
 acuire: acuire,
 release: release,
 }
}

lock = createLock() // create a lock
lock.acuire() // acuired a lock

if (lock.acuire()){
 console.log("Was able to acuire");
} else {
 console.log("Was not to acuire"); // This will execute
}

lock.release() // now the lock is released

if(lock.acuire()){
 console.log("Was able to acuire"); // This will execute
} else {
 console.log("Was not to acuire"); 
}

lock.release() // Hey don't forget to release</code></pre>
</div>
</div>

How could something equivalent to <code>lock</code> in C# be implemented in JavaScript?

So, to explain what I'm thinking a simple use case is: 

User clicks button <code>B</code>. <code>B</code> raises an onclick event. If <code>B</code> is in <code>event-state</code> the event waits for <code>B</code> to be in <code>ready-state</code> before propagating. If <code>B</code> is in <code>ready-state</code>, <code>B</code> is locked and is set to <code>event-state</code>, then the event propagates. When the event's propagation is complete, <code>B</code> is set to <code>ready-state</code>.

I could see how something close to this could be done, simply by adding and removing the class <code>ready-state</code> from the button. However, the problem is that a user can click a button twice in a row faster than the variable can be set, so this attempt at a lock will fail in some circumstances.

Does anyone know how to implement a lock that will not fail in JavaScript?

How to implement a lock in JavaScript

如何在JavaScript中实现与C#中的lock等效的东西？所以，为了解释我的想法，一个简单的用例是：用户单击按钮B。B会引发一个onclick事件。如果B在event-state中，则事件在传播之前等待B在ready-state中。如果B在ready-state中，则B被锁定并设置为event-state，则事件将...

问如何在JavaScript中实现锁
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在JavaScript中实现锁EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在JavaScript中实现锁
EN