Как реализовать блокировку в JavaScript

Как можно lockбыло реализовать что-то, эквивалентное C #, в JavaScript?

Итак, чтобы объяснить, что я думаю, простой вариант использования:

Пользователь нажимает кнопку B. Bвызывает событие onclick. Если Bв , event-stateожидает событие для Bбыть в ready-stateперед его распространением. Если Bесть ready-state, Bзаблокировано и установлено в event-state, то событие распространяется. Когда распространение события завершено, Bустанавливается значение ready-state.

Я мог видеть, как можно сделать что-то близкое к этому, просто добавив и удалив класс ready-stateс помощью кнопки. Однако проблема заключается в том, что пользователь может дважды щелкнуть кнопку подряд быстрее, чем может быть установлена ​​переменная, поэтому в некоторых случаях эта попытка блокировки не удастся.

Кто-нибудь знает, как реализовать блокировку, которая не откажет в 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 onreadystatechangeобработчики в некоторых версиях Firefox), является параллельным циклом событий . Таким образом, вам не нужно беспокоиться о блокировке в этом случае.

В JavaScript есть модель параллелизма, основанная на «цикле событий». Эта модель сильно отличается от модели на других языках, таких как C или Java.

...

Среда выполнения JavaScript содержит очередь сообщений, которая представляет собой список сообщений для обработки. Каждому сообщению соответствует функция. Когда стек пуст, сообщение извлекается из очереди и обрабатывается. Обработка состоит из вызова связанной функции (и, таким образом, создания начального кадра стека). Обработка сообщения заканчивается, когда стек снова становится пустым.

...

Каждое сообщение обрабатывается полностью перед обработкой любого другого сообщения. Это предлагает некоторые приятные свойства при рассмотрении вашей программы, в том числе тот факт, что всякий раз, когда функция запускается, она не может быть прервана и будет выполняться полностью до запуска любого другого кода (и может изменять данные, которыми манипулирует функция). Это отличается, например, от C, где, если функция выполняется в потоке, ее можно остановить в любой момент, чтобы запустить какой-либо другой код в другом потоке.

Обратной стороной этой модели является то, что, если сообщение занимает слишком много времени для завершения, веб-приложение не может обрабатывать действия пользователя, такие как щелчок или прокрутка. Браузер смягчает это с помощью диалогового окна «Сценарий слишком долго запускается». Хорошая практика - сократить время обработки сообщения и, если возможно, разделить одно сообщение на несколько.

Дополнительные ссылки на параллелизм цикла событий см. В E

У меня был успех мьютекс-обещание .

Я согласен с другими ответами, которые могут не потребоваться в вашем случае. Но неправда, что в 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>

Удачного кодирования !!!

Некоторое дополнение к ответу Джоша Ривера в соответствии с моим случаем;

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, и эти две функции будут использовать одинаковый результат.

Блокировки все еще используются в 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