1

我正在尝试更好地使用 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()以太不起作用（页面只是空白）。我在做什么错，如何让我的功能在页面加载时运行？我正在努力学习，所以解释会很棒。

4

3 回答 3

3

匿名函数不会立即运行，您正在考虑经常使用匿名函数的立即调用函数表达式。

要修复您的代码：

a）摆脱this.init“对象”中的函数包装器-您没有使用它，只有在您用于实例化对象this.foo时才有意义：new

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

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

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

$(setColors);

注意：后者是调用此处理程序的合法方式 - jQuery 将自动注册您以这种方式传递的任何函数作为document.ready处理程序。它类似于写作：

$(function() { setColors() })

但没有额外的（无用的）函数包装器。

于 2013-03-05T13:37:28.003 回答
0

要在 DOM 初始化后运行它，您可以将它放在一个就绪侦听器 (jQuery) 中：

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

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

就像是：

function setColors() {
    // Code
}();
于 2013-03-05T13:30:20.827 回答
0

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 函数本身不返回任何东西，所以你可以调用它。

于 2013-03-05T13:31:49.800 回答