如何决定Javascript和Jquery函数的执行顺序

How to decide execution sequence for Javascript and Jquery function

本文关键字：函数 Jquery 执行 顺序 Javascript 何决定 决定      更新时间：2023-09-26

单击Cancel按钮时，我正在调用两个函数——一个Java脚本和一个Jquery函数
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())之前执行，那么我如何更改执行顺序
编辑：
我用另一个按钮也试过了

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

并且它的工作精细Jquery函数在onClick函数之前被调用
这让人更加困惑。

在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分离，如果可能的话，最好放在一个单独的文件中。

$(".noWarning").click(function() 
{
    needToConfirm = false;
    alert("NeedToConfirm : " + needToConfirm);
    showMessage('cancelButton', 'Cancelling...'); 
    disableButtons(); 
    submitForm('${cancelDataRequestFormUrl}');
});

请记住，jQuery是一个基于javascript的库。因此，您可以在jQuery回调中使用JS。

如果你希望.noWarning是一个单独的回调（用于绑定到多个元素），并且#cancelButton有一个唯一的回调，你可以这样做：

$(".noWarning").click(function() 
{
    needToConfirm = false;
    alert("NeedToConfirm : " + needToConfirm);
}); 
$("#cancelButton").click(function() 
{
    showMessage('cancelButton', 'Cancelling...'); 
    disableButtons(); 
    submitForm('${cancelDataRequestFormUrl}');
});

正如您所看到的，您定义回调的顺序很重要。

执行顺序由将函数绑定到点击事件的顺序决定。但是，为了将函数绑定到按钮的onclick事件，必须已经定义了按钮。

在您的示例中，您定义了按钮并直接将showMessage函数绑定到它，方法是说onclick=。。。等有问题的是，在你的代码中，你绑定了第二个函数。

要获得对它的更多控制，请以相同的方式绑定onclick函数，可以在onclick属性中定义它，也可以稍后使用javascript进行绑定。

示例

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

或者像一样

$("#button1").click(function2);  
$("#button1").click(function1);

为什么不将showMessage函数放入jQuery函数中呢？

相关文章：