blocks|key|1339921|text|function+LoadData(callback)+
{
++++alert('the+data+have+been+loaded');
++++callback(loadedData,+currentObject);
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1339922|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>function LoadData(callback) 
{
 alert('the data have been loaded');
 callback(loadedData, currentObject);
}
</code></pre>

blocks|key|1124911|text|尝试：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1124912|function+LoadData+(callback)
{
++++//+...+Process+whatever+data
++++callback+(loadedData,+currentObject);
}|code-block|syntax|javascript|1124913|在JavaScript中，函数是第一类；您可以只传递它们。|offset|length|1124914|entityMap|0|LINK|mutability|MUTABLE|url|http://en.wikipedia.org/wiki/JavaScript^0|0|0|1|A|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

Try:

<pre><code>function LoadData (callback)
{
 // ... Process whatever data
 callback (loadedData, currentObject);
}
</code></pre>

Functions are first class in <a href="http://en.wikipedia.org/wiki/JavaScript" rel="nofollow noreferrer">JavaScript</a>; you can just pass them around.

blocks|key|1340005|text|在尝试执行回调之前，最好确保回调是一个实际的函数：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1340006|if+(callback+&&+typeof(callback)+===+"function")+{

++callback();
}|code-block|syntax|javascript|1340007|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

It is good practice to make sure the callback is an actual function before attempting to execute it:

<pre><code>if (callback &amp;&amp; typeof(callback) === "function") {

 callback();
}
</code></pre>

blocks|key|1340049|text|我的2美分。相同但不同。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1340050|<script>
++++dosomething("blaha",+function(){
++++++++alert("Yay+just+like+jQuery+callbacks!");
++++});


++++function+dosomething(damsg,+callback){
++++++++alert(damsg);
++++++++if(typeof+callback+==+"function")+
++++++++callback();
++++}
</script>|code-block|syntax|javascript|1340051|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

My 2 cent. Same but different...

<pre><code>&lt;script&gt;
 dosomething("blaha", function(){
 alert("Yay just like jQuery callbacks!");
 });


 function dosomething(damsg, callback){
 alert(damsg);
 if(typeof callback == "function") 
 callback();
 }
&lt;/script&gt;
</code></pre>

blocks|key|1125038|text|+++function+callback(e){
++++++return+e;
+++}
++++var+MyClass+=+{
+++++++method:+function(args,+callback){
++++++++++console.log(args);
++++++++++if(typeof+callback+==+"function")
++++++++++callback();
+++++++}++++
++++}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1125039|==============================================|unstyled|1125040|MyClass.method("hello",function(){
++++console.log("world+!");
});|1125041|1125042|结果是：|1125043|hello+world+!|1125044|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|R|8|@]|9|@]|A|$B|C]]|$1|I|3|E|5|F|7|S|8|@]|9|@]|A|$]]|$1|J|3|K|5|F|7|T|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|U|8|@]|9|@]|A|$B|C]]|$1|N|3|-4|5|F|7|V|8|@]|9|@]|A|$]]]|O|$]]

<pre><code> function callback(e){
 return e;
 }
 var MyClass = {
 method: function(args, callback){
 console.log(args);
 if(typeof callback == "function")
 callback();
 } 
 }
</code></pre>

==============================================

<pre><code>MyClass.method("hello",function(){
 console.log("world !");
});
</code></pre>

==============================================

Result is:

<pre><code>hello world !
</code></pre>

blocks|key|1125056|text|function+loadData(callback)+{

++++//execute+other+requirement

++++if(callback+&&+typeof+callback+==+"function"){
++++++++callback();
+++}
}

loadData(function(){

+++//execute+callback

});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1125057|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>function loadData(callback) {

 //execute other requirement

 if(callback &amp;&amp; typeof callback == "function"){
 callback();
 }
}

loadData(function(){

 //execute callback

});
</code></pre>

blocks|key|1125114|text|当调用回调函数时，我们可以像下面这样使用它：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1125115|consumingFunction(callbackFunctionName)|offset|length|style|CODE|1125116|示例：|1125117|//+Callback+function+only+know+the+action,
//+but+don't+know+what's+the+data.
function+callbackFunction(unknown)+{
++console.log(unknown);
}

//+This+is+a+consuming+function.
function+getInfo(thenCallback)+{
++//+When+we+define+the+function+we+only+know+the+data+but+not
++//+the+action.+The+action+will+be+deferred+until+excecuting.
++var+info+=+'I+know+now';
++if+(typeof+thenCallback+===+'function')+{
++++thenCallback(info);++++
++}
}

//+Start.
getInfo(callbackFunction);+//+I+know+now|code-block|syntax|javascript|1125118|这是包含完整示例的Codepend。|1125119|entityMap|0|LINK|mutability|MUTABLE|url|https://codepen.io/eric_tan/pen/KWmOLZ^0|0|0|13|0|0|0|9|8|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@$D|10|E|11|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|12|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|13|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|14|8|@]|9|@$D|15|E|16|1|17]]|A|$]]|$1|Q|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

When calling the callback function, we could use it like below:

<code>consumingFunction(callbackFunctionName)</code>

Example:

<pre><code>// Callback function only know the action,
// but don't know what's the data.
function callbackFunction(unknown) {
 console.log(unknown);
}

// This is a consuming function.
function getInfo(thenCallback) {
 // When we define the function we only know the data but not
 // the action. The action will be deferred until excecuting.
 var info = 'I know now';
 if (typeof thenCallback === 'function') {
 thenCallback(info); 
 }
}

// Start.
getInfo(callbackFunction); // I know now
</code></pre>

This is the <a href="https://codepen.io/eric_tan/pen/KWmOLZ" rel="nofollow noreferrer">Codepend</a> with full example.

blocks|key|1340249|text|有些答案虽然正确，但理解起来可能有点棘手。下面是一个外行术语的例子：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1340250|var+users+=+["Sam",+"Ellie",+"Bernie"];

function+addUser(username,+callback)
{
++++setTimeout(function()
++++{
++++++++users.push(username);
++++++++callback();
++++},+200);
}

function+getUsers()
{
++++setTimeout(function()
++++{
++++++++console.log(users);
++++},+100);
}

addUser("Jake",+getUsers);|code-block|syntax|javascript|1340251|回调的意思是，在显示带有console.log的用户列表之前，总是将"Jake“添加到用户中。|offset|length|style|CODE|1340252|Source+(YouTube)|1340253|entityMap|0|LINK|mutability|MUTABLE|url|https://www.youtube.com/watch?v=xHneyv38Jro^0|0|0|C|B|0|0|G|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@$I|Z|J|10|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|11|8|@]|9|@$I|12|J|13|1|14]]|A|$]]|$1|O|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

Some of the answers, while correct may be a little tricky to understand. Here is an example in layman's terms:

<pre><code>var users = ["Sam", "Ellie", "Bernie"];

function addUser(username, callback)
{
 setTimeout(function()
 {
 users.push(username);
 callback();
 }, 200);
}

function getUsers()
{
 setTimeout(function()
 {
 console.log(users);
 }, 100);
}

addUser("Jake", getUsers);
</code></pre>

The callback means, "Jake" is always added to the users before displaying the list of users with <code>console.log</code>.

<a href="https://www.youtube.com/watch?v=xHneyv38Jro" rel="nofollow noreferrer">Source (YouTube)</a>

blocks|key|1340306|text|+++++function+login(email,+password,+callback)+{
+++++++++//verify+the+user
+++++++++const+users+=+[
++++++++++{+email:+"abc@gmail.com",+password:+"123"+},
++++++++++{+email:+"xyz@gmail.com",+password:+"xyz"+}
+++++++++];

+++++++++const+user+=+users.find(
+++++++++++(user)+=>+user.email+===+email+&&+user.password+===+password
+++++++++);
+++++++++callback(user);
+++++++`enter+code+here`}

++++function+redirect(user)+{
+++++++if+(user)+{
++++++++++//user+is+successfully+logged+in
++++++++++console.log("user+is+successfully+logged+in+");
+++++++}+else+{
+++++++++console.log("Incorrect+credentials+");
+++++++}+
++++}

++++
++++login("abc@gmail.com",+"123",+redirect);|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1340307|我希望这个例子能帮助每个想要了解JS回调的人|unstyled|1340308|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code> function login(email, password, callback) {
 //verify the user
 const users = [
 { email: &quot;abc@gmail.com&quot;, password: &quot;123&quot; },
 { email: &quot;xyz@gmail.com&quot;, password: &quot;xyz&quot; }
 ];

 const user = users.find(
 (user) =&gt; user.email === email &amp;&amp; user.password === password
 );
 callback(user);
 `enter code here`}

 function redirect(user) {
 if (user) {
 //user is successfully logged in
 console.log(&quot;user is successfully logged in &quot;);
 } else {
 console.log(&quot;Incorrect credentials &quot;);
 } 
 }

 
 login(&quot;abc@gmail.com&quot;, &quot;123&quot;, redirect);
</code></pre>
I hope this example will help everyone who wants to know about the callback in JS

All I need to do is to execute a callback function when my current function execution ends.

<pre><code>function LoadData() 
{
 alert('The data has been loaded');
 //Call my callback with parameters. For example,
 //callback(loadedData , currentObject);
}
</code></pre>

A consumer for this function should be like this:

<pre><code>object.LoadData(success);

function success(loadedData , currentObject) 
{
 //Todo: some action here 
}
</code></pre>

How do I implement this?

Create a custom callback in JavaScript

jQuery

我需要做的就是在当前函数执行结束时执行一个回调函数。function LoadData() {    alert('The data has been loaded');    //Call my callback with parameters. For example,    //callback(loadedDa...

问在JavaScript中创建自定义回调
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在JavaScript中创建自定义回调EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在JavaScript中创建自定义回调
EN