javascript:将函数作为参数传递给另一个函数,然后我期望以另一种顺序调用代码

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/6014385/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 19:53:21  来源:igfitidea点击:

javascript: pass function as a parameter to another function, the code gets called in another order then i expect

javascriptjquery

提问by Michel

i want to pass a function to another function as a parameter.

我想将一个函数作为参数传递给另一个函数。

I want to do that because the latter function calls an async Jquery method and AFTER that gives a result back, i want some javascript code executed.

我想这样做是因为后一个函数调用异步 Jquery 方法,并且在返回结果后,我想要执行一些 javascript 代码。

And because this function is called from multiple places, i want the code to execute (after the async Jquery code gets executed) to be passed in the function. Makes sense? i hope :)

并且因为这个函数是从多个地方调用的,我希望在函数中传递要执行的代码(在异步 Jquery 代码被执行之后)。说得通?我希望 :)

Now what is see is that the order in which the code is executed is noth what i want. I've simplified the code to this code:

现在看到的是代码执行的顺序不是我想要的。我已将代码简化为以下代码:

$('#AddThirdParty').click(function() {
    var func = new function() {
        alert('1');
        alert('2');
        alert('3');
    }
    alert('4');
    LoadHtml(func);
    alert('5');
});
function LoadHtml(funcToExecute) {
    //load some async content
    funcToExecute;
}

Now what i wanted to achieve (or at least what i thought would happen) was that alert4 would fire, then the loadhtml would fire alert1, alert2 and alert3, and then the code would return to alert5.

现在我想要实现的(或者至少我认为会发生的)是alert4 会触发,然后loadhtml 会触发alert1、alert2 和alert3,然后代码将返回alert5。

But what happens is this: alert1, alert2, alert3, alert4, alert5.

但会发生什么:alert1、alert2、alert3、alert4、alert5。

Does anyone know what i'm doing wrong and why this is the order in which the code is executed?

有谁知道我做错了什么,为什么这是代码执行的顺序?

It looks like the alert1..alert3 gets executed when i define the new function(), but why doesn't it ALSO get executed when i call it from the LoadHtmlfunction?

看起来 alert1..alert3 在我定义时会被执行new function(),但是为什么当我从LoadHtml函数调用它时它也不会被执行?

回答by Amadan

$('#AddThirdParty').click(function() {
    var func = function() { // NOTE: no "new"
        alert('1');
        alert('2');
        alert('3');
    }
    alert('4');
    LoadHtml(func);
    alert('5');
});
function LoadHtml(funcToExecute) {
    //load some async content
    funcToExecute(); // NOTE: parentheses
}

Two errors: the syntax for anonymous functions does not include the keyword new; and JavaScript requires parentheses for function calls, even if functions do not take any arguments. When you just say funcToExecute, that is just a variable giving its value in a context where nothing is using that value (kind of like writing 3;as a statement).

两个错误:匿名函数的语法不包含关键字new;JavaScript 要求函数调用使用括号,即使函数不接受任何参数。当你只是说funcToExecute,那只是一个变量在没有使用该值的上下文中给出它的值(有点像写成3;一个语句)。

You might notice that you already know how to use anonymous functions: you did not write $('#AddThirdParty').click(new function() ...);

您可能会注意到您已经知道如何使用匿名函数:您没有编写 $('#AddThirdParty').click(new function() ...);

回答by Raynos

$('#AddThirdParty').click(function() {
    var func = new function() {
        alert('1');
        alert('2');
        alert('3');
    }
    alert('4');
    LoadHtml(func);
    alert('5');
});
function LoadHtml(funcToExecute) {
    //load some async content
    funcToExecute;
}

The newkeyword creates an object from the function. This means the function (which is anonymous) gets called immediatly. This would be the same as

new关键字创建从该函数的对象。这意味着函数(它是匿名的)被立即调用。这将与

var foo = function() {
    alert("1");
    alert("2");
    alert("3");
}
var func = new foo();

This means your creating a new object (not a function!) and inside the constructor your alert 1,2,3. Then you alert 4. Then you call LoadHtml which does nothing, then you alert 5.

这意味着您创建一个新对象(不是函数!)并在构造函数中创建警报 1,2,3。然后你提醒 4。然后你调用 LoadHtml,它什么都不做,然后你提醒 5。

As for

至于

funcToExecute;

funcToExecute;

The funcToExecute is just a variable containing a function. It actually needs to be executed.

funcToExecute 只是一个包含函数的变量。它实际上需要执行。