Как определить последовательность выполнения для функций Javascript и Jquery - PullRequest
Новая
       12

Как определить последовательность выполнения для функций Javascript и Jquery

2 голосов
/ 07 июня 2011

Я вызываю две функции: один Java-скрипт и одну функцию Jquery при нажатии кнопки Cancel.
Функция сценария Java выполняется перед функцией Jquery, и я хочу прямо противоположное.
Вот мой HTML код 

<button type="button" class="noWarning" id="cancelButton" 
    onclick="javascript: showMessage('cancelButton', 'Cancelling...'); disableButtons(); submitForm('${cancelDataRequestFormUrl}');">
    Cancel</button>

Функция Jquery 

$(".noWarning").click(function() 
    {
        needToConfirm = false;
        alert("NeedToConfirm : " + needToConfirm);
    });

showMessage('cancelButton', 'Cancelling...'); исполняется до $(".noWarning").click(function()), как мне изменить порядок выполнения?
EDIT:
Я попробовал то же самое с другой кнопкой 

<button type="button" class="noWarning" id="saveButton" 
    onclick="javascript: submitDataRequest('saveButton', 'Saving...', 'newDataRequestForm', '${saveDataRequestFormUrl}', '${successSaveDataRequestFormUrl}');">
    Save as Draft</button>

И его нормально работающая функция Jquery вызывается раньше onClick функций.
Что ставит больше путаницы.

~ Аджинкья.

Ответы [ 4 ]

4 голосов
/ 07 июня 2011

В JavaScript обратные вызовы и обработчики событий должны выполняться в том порядке, в котором они были связаны, и нет способа изменить этот порядок.Код в атрибуте onclick будет связан непосредственно после создания элемента и, следовательно, будет выполняться первым.

Единственный способ предотвратить это - удалить атрибут либо в исходном коде.или на стороне клиента с помощью jQuery .removeAttr, как показано в этом контрольном примере .

Затем вы можете связать обратные вызовы с jQuery в том порядке, в котором вы хотитеподлежит исполнению: 

$(".noWarning").click(function(){
    needToConfirm = false;
    alert("NeedToConfirm : " + needToConfirm);
});

$("#cancelButton").click(function(){
    showMessage('cancelButton', 'Cancelling...');
    disableButtons();
    submitForm('${cancelDataRequestFormUrl}');
});

Обратите внимание, что использование атрибута onclick считается плохой практикой, которая относится к 90-м годам, и ее следует избегать.JavaScript должен быть отделен от HTML и по возможности лучше помещен в отдельный файл.

3 голосов
/ 07 июня 2011 
$(".noWarning").click(function() 
{
    needToConfirm = false;
    alert("NeedToConfirm : " + needToConfirm);
    showMessage('cancelButton', 'Cancelling...'); 
    disableButtons(); 
    submitForm('${cancelDataRequestFormUrl}');
});

Помните, что jQuery - это библиотека на основе JavaScript. Таким образом, вы можете использовать JS в обратных вызовах jQuery.

Если вы хотите, чтобы .noWarning был отдельным обратным вызовом (для привязки к нескольким элементам) и #cancelButton, чтобы иметь уникальный обратный вызов, вы можете сделать это: 

$(".noWarning").click(function() 
{
    needToConfirm = false;
    alert("NeedToConfirm : " + needToConfirm);
}); 

$("#cancelButton").click(function() 
{
    showMessage('cancelButton', 'Cancelling...'); 
    disableButtons(); 
    submitForm('${cancelDataRequestFormUrl}');
});

Как видите, порядок определения обратных вызовов имеет значение.

1 голос
/ 07 июня 2011

Порядок выполнения определяется порядком, которым вы связываете функцию с событием при нажатии.Но чтобы связать функцию с событием onclick кнопки, кнопка должна быть уже определена.

В вашем примере вы определяете свою кнопку и напрямую привязываете к ней функцию showMessage, говоря onclick =.... и т. д. Возможно, еще немного в вашем коде вы привязываете вторую функцию.

Чтобы получить больший контроль над ней, связывайте все функции onclick одинаково, либо определив ее в атрибуте onclick, либосделав это позже с помощью JavaScript.

Пример 

<button id="button1" onclick="function1();function2();">click me</button>

Или сделав это так 

$("#button1").click(function2);  
$("#button1").click(function1);
0 голосов
/ 07 июня 2011

почему бы вам просто не поместить функцию showMessage в функцию jQuery?

...