Отключить onclick, пока не будет выполнена функция JS

Question

У меня есть сайт викторины на основе PHP / JS / MySQL с несколькими вариантами ответов. Варианты ответа отображаются на четырех кнопках.

<input type = "button" value="$alt1" onClick="changeQuestion('alternative1'); this.style.backgroundColor = '#A9A9A9'">

Есть ли способ, когда при нажатии кнопки отключить щелчок для всех кнопок до завершения функции JS? Как и сейчас, пользователь может выбрать несколько вариантов одного вопроса, что, конечно, испортит результат.

Функция JS, вызываемая onclick, использует AJAX для вызова файла PHP, который обрабатывает ответ.

Большое спасибо

Answer 1

Самый простой способ сделать это - установить какое-нибудь значение флага:

var pending = false;

function changeQuestion(nam)
{
    // test to see if something else set the state to pending.
    // if so... return, we don't want this to happen.
    if(pending) return;
    pending = true; // raise the flag!

    /* ... later ... */
    // in the success method of your AJAX call add:
    pending = false;

Answer 2

Просто запустите Ajax синхронно.

В jQuery вам просто нужно добавить параметр async = false:

$.ajax({
    url:'foo.handler.php',
    data:params,
    async:false,
    success:function(){
        // do something cool.
    }
});