如何确定 Javascript 和 Jquery 函数的执行顺序答案

【问题标题】：How to decide execution sequence for Javascript and Jquery function如何确定 Javascript 和 Jquery 函数的执行顺序
【发布时间】：2011-06-07 07:00:55
【问题描述】：

单击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 jquery html jquery-selectors dom-events

【解决方案1】：

在 JavaScript 中，回调和事件处理程序应该按照它们绑定的顺序执行，并且无法更改该顺序。 onclick 属性中的代码将在创建元素后直接绑定，因此将首先被执行。

防止这种情况的唯一方法是使用 jQuery 的.removeAttr 在源端或客户端删除属性，如test case 所示。

然后，您可以按照您希望它们执行的顺序将回调与 jQuery 绑定：

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

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

请注意，onclick 属性的使用被认为是属于 90 年代的不良做法，应该避免。 JavaScript 应该与 HTML 分开，如果可能的话最好放在一个单独的文件中。

【讨论】：

@Marcus：问题是我正在编写一个应该在任何地方运行的通用脚本，我不应该（不能）更改原始代码。还有其他选择吗？
@Ajinkya，很遗憾没有。 onclick-attribute 中的代码将在创建 DOM 元素后立即绑定到事件，因此将首先执行。但是，您可以操作代码客户端并使用.removeAttr("onclick") 删除属性。
@Marcus Ekwall，我想.onclick = null 也可以吗？（虽然不确定！）
@Domenic，效果和test case中看到的一样好
更新了我的答案，所以它实际上回答了你的问题；）

【解决方案2】：

$(".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}');
});

如您所见，定义回调的顺序很重要。

【讨论】：

感谢您的建议，它帮助了很多:)

【解决方案3】：

执行顺序取决于您将函数绑定到 on click 事件的顺序。但是为了将函数绑定到按钮的 onclick 事件，必须已经定义了按钮。

在您的示例中，您正在定义按钮并直接将 showMessage 函数绑定到它，方法是说 onclick=... 等。您绑定第二个函数的代码中可能还有更多内容。

要对其进行更多控制，请以相同的方式绑定您的 onclick 函数，方法是在 onclick 属性中定义它，或者稍后使用 javascript 进行。

例子

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

或者这样做

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

【讨论】：

【解决方案4】：

为什么不把 showMessage 函数放到 jQuery 函数中呢？

【讨论】：