页面加载的匿名函数

Anonymous function on page load

本文关键字：函数 加载      更新时间：2023-09-26

我正在尝试更好地使用JavaScript，并学习如何在函数中利用我的代码并保持一切干净。我试图在页面加载上运行一个函数…

var setColors = function(){
        this.init = function(){
            $.getJSON('js/colors.json', function(colors) {
                    $.each(colors, function(i, colors) {
                        $('<li>', {
                            text: colors['color'],
                            'name' : colors['color'],
                            'data-hex' : colors['hex'],
                            'data-var' : colors['var']
                        }).appendTo('#picker');
                    })
            });
        }
    }

(这不是一个颜色选择器，只是一个颜色列表)我希望setColors()在页面启动时立即执行。我读到一个匿名函数自动运行，但这一个不是，我也试过…

$(function(){
    setColors();
});

下面的setColors()功能，这是不工作醚(该页只是空白)。我做错了什么，我如何让我的功能在页面加载上运行?我正在努力学习，所以最好能解释一下。

匿名函数不会立即运行，您考虑的是立即调用的函数表达式，它们恰好经常使用匿名函数。

修复你的代码:

a)去掉"对象"内的this.init函数包装器-你不使用它，this.foo只有在你使用new实例化对象时才有意义:

function setColors() {
    return $.getJSON(...);
}

请注意，返回$.getJSON()结果允许您注册额外的延迟对象处理程序，注册错误处理程序等。

b)在document.ready处理程序中调用上述函数(必须这样做，因为AJAX回调会修改DOM)。

$(setColors);

注意:后面的是调用这个处理程序的合法方式——jQuery会自动将你以这种方式传递的任何函数注册为document.ready处理程序。类似于这样写:

$(function() { setColors() })

但是没有额外的(无用的)函数包装器

要在DOM初始化后运行该程序，可以将其放入现成的侦听器(jQuery)中:

$(document).on('ready', function() {
    setColors();
});

如果你想让函数在js中一遇到就自动运行，在函数结束的}之后，add ();

类似:

function setColors() {
    // Code
}();

setColors不返回下一个函数，或者在结束时调用它。你可以把它改成:

var setColors = function(){
        this.init = function(){
            $.getJSON('js/colors.json', function(colors) {
                    $.each(colors, function(i, colors) {
                        $('<li>', {
                            text: colors['color'],
                            'name' : colors['color'],
                            'data-hex' : colors['hex'],
                            'data-var' : colors['var']
                        }).appendTo('#picker');
                    })
            });
        }
        init(); // <--- change
    }

这对你有好处。你甚至不需要"返回它"，因为init函数本身不返回任何东西，所以你可以直接调用它。

相关文章：