JavaScriptでロックを実装する方法

lockC＃と同等のものをJavaScriptでどのように実装できますか？

したがって、私が考えている簡単なユースケースを説明すると、次のようになります。

ユーザーがボタンをクリックしますB。 Bonclickイベントを発生させます。がイベントにある場合Bは、伝播する前にが存在するのをevent-state待ちます。場合であり、ロックされ、に設定され、その後、イベントが伝搬します。イベントの伝播が完了すると、はに設定されます。Bready-stateBready-stateBevent-stateBready-state

ready-stateボタンにクラスを追加したり、ボタンからクラスを削除したりするだけで、これに近いことがどのように行われるかがわかりました。ただし、問題は、ユーザーが変数を設定するよりも速くボタンを2回続けてクリックできるため、状況によってはこのロックの試行が失敗することです。

JavaScriptで失敗しないロックを実装する方法を知っている人はいますか？

ロックはJSの疑わしいアイデアであり、スレッドレスであり、同時実行保護を必要としないことを目的としています。遅延実行で呼び出しを組み合わせようとしています。このために私が従うパターンは、コールバックの使用です。このようなもの：

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);
             }
        });
    }
}

DOMイベントリスナーまたはpubsubソリューションを使用してこれを実装することもできます。

JavaScriptは、ごくわずかな例外（XMLHttpRequest onreadystatechangeFirefoxの一部のバージョンではハンドラー）を除いて、イベントループ並行です。したがって、この場合はロックについて心配する必要はありません。

JavaScriptには、「イベントループ」に基づく並行性モデルがあります。このモデルは、CやJavaなどの他の言語のモデルとはかなり異なります。

..。

JavaScriptランタイムには、処理されるメッセージのリストであるメッセージキューが含まれています。各メッセージには関数が関連付けられています。スタックが空になると、メッセージがキューから取り出されて処理されます。処理は、関連する関数の呼び出し（したがって、初期スタックフレームの作成）で構成されます。スタックが再び空になると、メッセージ処理は終了します。

..。

各メッセージは、他のメッセージが処理される前に完全に処理されます。これは、関数が実行されるたびにプリエンプトできず、他のコードが実行される前に完全に実行される（そして関数が操作するデータを変更できる）という事実を含め、プログラムについて推論するときにいくつかの優れたプロパティを提供します。これはCとは異なります。たとえば、関数がスレッドで実行されている場合、関数をいつでも停止して、別のスレッドで他のコードを実行できます。

このモデルの欠点は、メッセージの完了に時間がかかりすぎると、Webアプリケーションがクリックやスクロールなどのユーザー操作を処理できないことです。ブラウザは、「スクリプトの実行に時間がかかりすぎる」ダイアログでこれを軽減します。従うべき良い習慣は、メッセージ処理を短くし、可能であれば1つのメッセージを複数のメッセージに分割することです。

イベントループの同時実行に関するその他のリンクについては、Eを参照してください。

mutex-promiseで成功しました。

私はあなたがあなたのケースでロックする必要がないかもしれないという他の答えに同意します。しかし、Javascriptでロックする必要がないというのは真実ではありません。並行性を処理しない外部リソースにアクセスする場合は、相互排他性が必要です。

ロックは、マルチスレッドシステムで必要な概念です。ワーカースレッドを使用する場合でも、メッセージはワーカー間で値によって送信されるため、ロックは不要です。

ボタンの間にセマフォ（フラグシステム）を設定するだけでよいのではないかと思います。

イベント終了後、ボタンを無効にして有効にしてみませんか？

<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>

ハッピーコーディング!!!

私の場合によると、JoshRiverの回答にいくつか追加されています。

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);
});

api呼び出しは1つだけで、これら2つの関数は同じ結果を消費します。

ロックはまだJSで使用されています。私の経験では、AJAX呼び出しを行う要素をクリックするスパムを防ぐために、ロックを使用するだけで済みました。AJAX呼び出し用にローダーを設定している場合、これは必要ありません（また、クリック後にボタンを無効にします）。しかし、どちらの方法でも、私がロックに使用したものは次のとおりです。

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];
}

使用法：

手動ロック解除（通常はXHRの場合）

LockCallback('someKey',(delCallback) => { 
    //do stuff
    delCallback(); //Unlock method
}, true)

自動ロック解除

LockCallback('someKey',() => { 
    //do stuff
})

これは、クロージャーを介して実装された単純なロックメカニズムです

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