Проблема синхронизации событий Javascript

Question

У меня есть небольшая, но очень важная проблема, связанная с синхронизацией выполнения обработчика событий onblur и onclick в javascript.

На самом деле у меня есть HTML-форма, содержащая одно текстовое поле и одну кнопку отправки. onblur помещается в текстовое поле, этот обработчик выполняет метод с именем ajexValidation (). Кнопка отправки связана с onclick hndler, который выполняет ajexSubmitData (). Обработчик Ajex используется в обоих случаях, потому что onblur введенная дата отправляется для подтверждения себя с удаленного сервера и повторного запуска проверенных данных и назначения данных в текстовом поле.

В случае, если обработчик onclick отправляет проверенные данные на удаленный сервер для запроса других деталей.

Это общий поток страниц.

Но есть какая-то проблема ..

Когда пользователь нажимает кнопку отправки, сначала запускается onblur, а затем - onclick.

Теперь данные находятся на процессе проверки на сервере, и onclick начинает выполнять ajexSubmitData (), что вызывает проблемы, поскольку процесс - сначала проверяет данные, а затем отправляет проверенные данные на сервер для запроса, Вы можете сказать, проблема четной синхронизации.

Так что все, что мне нужно, это отслеживать уведомление о завершении метода onblur, приостанавливать метку onclick и выполнять ожидание этого уведомления. Получив уведомление, запустите ajexSubmitData ().

Любая помощь будет высоко ценится,

-райниш

Answer 1

Вы можете сделать это:

var globalFlag = WAITING;
function onBlur_validateData() { // your "AjexValidation"
    sendAjaxRequest( function(data) { // this is the call back on ajax request completion
        if( data was valid )
            globalFlag = VALID;
        else
            globalFlag = INVALID;
    });
}

function onClick_submitData() { // wrapper around your "ajexSubmitData"
    if( globalFlag==WAITING )
        setTimeout( onClick_submitData, 200 );
    else if( globalFlag==INVALID )
        alert( "Your input was invalid!" );
    else ajexSubmitData();
}

function ajexSubmitData() {
    // do your stuff
}

Теперь globalFlag может быть частью объекта или всего, что доступно глобально.

Кроме того, убедитесь, что кнопка отправки отключена после нажатия.

ЗАМЕЧАНИЕ: как вызов setTimeout создает "цикл рекурсии в потоке". Это предотвратит зависание вашего пользовательского интерфейса, пока ваш код ожидает завершения проверки.

Приветствия

JRH.

Answer 2

Почему бы не использовать событие form.onsubmit для запуска вашего кода проверки и заставить проверку вызвать функцию submit в случае успеха? Таким образом, вы можете переопределить отправку по умолчанию, и если у вас нет Javascript, у вас все еще есть запасной путь к стандартной отправке?

Answer 3

Почему бы не проверить в том же методе, который отправляет. Просто мысль. Еще одна идея - постоянно отключать кнопку отправки, пока все не будет проверено.