3

我的问题最容易用代码块及其下面的问题来解释。

但这里试图用英语解释我的问题：

我正在学习 JavaScript（我很懒，所以我使用了很多 jQuery...;)）我遇到了一些我不太理解的东西，我不知道它叫什么，所以我不知道不知道我应该研究什么术语。

基本上我想知道什么时候需要使用function(){ ... }（没有名字）和什么时候使用function function_name(){ ... }（有名字），以及如何使用类似.click() .post()or的东西来执行一个函数setTimeout()。

我知道几个 jQuery 函数，比如.click()需要你放入一个要调用的函数。但问题是，你不能只说.click( function_name() )（如果我正确解释了我的测试结果，这将在执行脚本后立即调用该函数）而是你必须做.click( function(){ ... })或者你可以做.click( function function_name(){ ... }). 我还发现您可以说.click( function_name )，只要您事先定义var function_name = function function_name(){ ... }，而函数名称是可选的，无论是否添加它都可以使用。

我用我能想到的所有可能的场景做了一个例子。我确实发现了哪些有效，哪些无效，现在我想找出为什么每个都有效而其他无效。

我希望理解这将有助于我更好地理解异步函数，例如.post()or setTimeout()。

<button id="one">Button 1</button>
<button id="two">Button 2</button>
<button id="three">Button 3</button>
<button id="four">Button 4</button>
<button id="five">Button 5</button>
<button id="six">Button 6</button>
<button id="seven">Button 7</button>
<button id="eight">Button 8</button>
<button id="nine">Button 9</button>

<script type="text/javascript">
    function alert_three(){
        alert('three');
    }

    var alert_four = function(){
        alert('four');
    }

    function alert_five(){
        alert('five');
    }

    var alert_five = alert_five();
    //this will alert five right away, because we call to the function alert five, which does not return anything but creates an alert box.

    var alert_six = function alert_six(){
        alert('six');
    }

    $('#one').click( function(){
        alert('one');
    });
    //this will work correctly.

    $('#two').click( alert('two') );
    //this will alert two right away, because...?
    //it wont do anything else on click

    $('#three').click( alert_three() );
    //this will alert three right away, because...?
    //it wont do anything else on click

    $('#four').click( alert_four );
    //this will work correctly.

    $('#five').click( alert_five );
    //this wont do anything else on click

    $('#six').click( alert_six );
    //this will work correctly.

    $('#seven').click( function alert_seven(){
        alert('seven');
    });
    //this will work correctly.

    function alert_eight(){
        return function(){
           alert('eight');
        }
    }

    $('#eight').click( alert_eight() );
    //this will work correctly      

    function alert_nine(){
       alert('nine');
    }

    $('#nine').click( alert_nine ); 
    //this will not work
</script>
  • 为什么此脚本在启动时会先发出五个警报，然后是两个警报，然后是三个警报？
  • 为什么只有按钮 1、4、6 和 7 可以正常工作？
  • 您如何描述工作按钮之间的区别？
  • 您何时以及为什么会使用哪种变体？（意思是：什么时候给它一个名字，什么时候把函数写在一个变量中？）

同样的小提琴：http: //jsfiddle.net/ZfnaM/5/

4

4 回答 4

5

基本上我想知道什么时候需要使用function(){ ... }（没有名字）和什么时候使用函数function_name(){ ... }（有名字）

从来没有真正需要使用任何一个。有时使用其中一种更方便。

以及如何使用 .click() .post() 或 setTimeout() 之类的东西执行函数。

如果您正在使用接受回调的函数，那么您只需将要用作回调的函数像任何其他变量或文字一样传递。

如果你想编写一个使用回调的函数，那么它基本上可以归结为：

function accepts_callback(callback) {
    callback();
}
function a_callback() {
    alert("This is a callback");
}
accepts_callback(a_callback);

你不能只说.click( function_name() )

放在()一个函数之后会调用它。不要包括它们，因为你可以通过它。

为什么这个脚本会提醒前五个，

除了声明函数之外，您要做的第一件事是进行函数调用：var alert_five = alert_five();

然后两个

$('#two').click( alert('two') ); //this will alert two right away, because...?

你在alert这里打电话

//它不会在点击时做任何其他事情

的返回值alert将始终为undefined，这不是函数

然后三个在启动？

$('#three').click( alert_three() ); //这将立即警告三个，因为...？

您正在alert_three立即调用该函数。

//它不会在点击时做任何其他事情

alert_three没有 return 语句，所以它返回undefined，这不是一个函数

为什么只有按钮 1、4、6 和 7 可以正常工作？

是您将函数作为参数提供给 的唯一函数click()。

于 2013-08-10T19:48:09.480 回答
2

您的问题涉及的内容称为匿名函数和命名函数。例如，alert_three是一个命名函数，而alert_four（即使您已将其分配给一个变量）是一个匿名函数。这些函数是可互换的，并且在您开始执行诸如recursion之类的事情之前，使用其中一个或另一个可能对您来说并不重要，您可以在其中调用一个函数本身（因此它必须被命名）。

在 jQuery 示例中，函数实际上是回调，并且在 jQuery 方法中，它们应该遵循arguments，您已经用直接函数调用替换了几次。回调使您能够根据函数的上下文（通常称为this.

于 2013-08-10T19:56:09.400 回答
1

当您使用 jQuery 的 .click() 时，您正在绑定一个事件处理程序——这是您寻找的缺失词汇。

在绑定事件处理程序时，您需要传递一个函数以使其按预期工作。对于在页面加载时立即发出警报的项目（五、二和三），那是因为您没有提供函数，只是一个语句或评估为语句而不是函数的东西，所以它会立即执行并且不绑定函数定义（这就是为什么当您在页面加载后单击按钮时您没有收到另一个警报的原因）。

这就是二、三和五的共同点——它们不是（或不等同于）函数定义，只是语句，所以当 jQuery 在加载页面时评估语句时它们会执行，因为它试图添加适当的函数作为事件处理程序。这包括五个，因为您正在调用定义的函数，而不是传递函数定义。您可以在单击的 jQuery 文档中看到您需要传入函数定义。

这解释了您试图理解的前三个问题。

关于最后一项，那更多的是一种意见。我会使用一个变量来定义我想要绑定到多个事件以改进维护的函数定义。

快乐的脚本！

于 2013-08-10T21:11:21.793 回答
0

单击alert_five将不起作用，因为您已经用变量覆盖了该函数。

请注意：

 function alert_five(){
            alert('five');
    }
console.log(alert_five)  
//prints
function alert_five(){
        alert('five');
    }

然后，您将函数的返回值分配alert_five给其他东西，return_five()并且由于它不返回任何内容，因此它是未定义的。

var alert_five = alert_five();
console.log(alert_five)  
    //prints
undefined

在括号之间传递值，所以当你调用函数时，你调用.click(function_name())函数并传递它返回的值。

有些函数将其他函数作为参数，因此您必须将它们传递为function_name

于 2013-08-10T19:45:53.927 回答