javascript - jQuery 全局/本地事件执行顺序

Question

我有一个带有按钮的面板小部件。单击该按钮应执行一些与所有此类小部件相关的全局操作，然后仅执行与该小部件实例相关的一些本地操作。全局操作通过 CSS 类绑定(bind)在单独的 javascript 文件中，如下所示:

var App = function ()
{
    var handleWidgetButton = function ()
    {
        $('.widgetBtn').on('click', function (e)
        {
            // do smth global
        });

        return {
            init: function ()
            {
                handleWidgetButton();
            }
        };
    }
}();

jQuery(document).ready(function() 
{
    App.init();
});

而在 html 文件中，本地脚本是这样的:

$("#widgetBtn1234").click(function (e)
{
    // do smth local
});

目前本地脚本首先执行，全局脚本仅在我希望相反时执行。我试图用 document.ready 包装本地的，并让它在全局之后运行，但这似乎并没有改变执行顺序。有什么合适的方法可以将全局和本地 jQuery 绑定(bind)安排到同一元素吗？

Answer 1

您遇到的问题来自使用 jQuery 的 .ready() 函数来初始化 App，而您的本地代码中似乎没有这样的包装器。请尝试以下操作:

var App = function ()
{
    var handleWidgetButton = function ()
    {
        $('.widgetBtn').on('click', function (e)
        {
            // do smth global
        });

        return {
            init: function ()
            {
                handleWidgetButton();
            }
        };
    }
}();

$(function() 
{
    App.init();
});

然后在你的本地 JS 中:

$(function() {
    $("#widgetBtn1234").click(function (e)
    {
        // do smth local
    });
});

注意 $(function(){}) 可以用作 $(document).ready(function(){}); 的简写。另外，请确保您的 JS 文件位于本地 JS 之前，因为 javascript 是按顺序运行的。

或者，您可以使用 setTimeout() 来确保一切都正确加载:

(function executeOnReady() {
    setTimeout(function() {
        // Set App.isInitialized = true in your App.init() function
        if (App.isInitialized) runLocalJs();
        // App.init() hasn't been called yet, so re-run this function
        else executeOnReady();
    }, 500);
})();
function runLocalJs() {
    $("#widgetBtn1234").click(function (e)
    {
        // do smth local
    });
};