回调函数执行多次

Question

I am learning call back functions in Javascript and hence trying to execute a function that uses call back function

 var allUserDdata = []; function logStuf(userData) { if (typeof(userData) === "string") { console.log(userData); } else if (typeof(userData) === "object") { for (var items in userData) { console.log(items, userData[items]); } } } function getInput(options, callback){ allUserDdata.push(options); callback(allUserDdata); } getInput("Alex", logStuf); getInput({ "Name": "Alex", "Place": "Malaysia" }, logStuf); 

Instead of printing the output as:

0 Alex
1 {Name: "Alex", Place: "Malaysia"}

Its printing the output as:

0 Alex
0 Alex
1 {Name: "Alex", Place: "Malaysia"}

May I know why? Also, I am in the beginner's phase of learning Javascript so please ignore if its a stupid question.

Answer 1

Every time getInput is called, you're push ing to the allUserDdata array, and then the whole allUserData is piped to callback . So if you only want to log the item that getInput was called with and not the whole array, call callback on the item, not the array:

 var allUserDdata =[]; function logStuf(userData){ if (typeof(userData)==="string"){ console.log(userData); } else if (typeof(userData)==="object") { for (var items in userData) { console.log(items, userData[items]); } } } function getInput(options, callback){ allUserDdata.push(options); callback(options); } getInput("Alex", logStuf); getInput({"Name":"Alex", "Place":"Malaysia"}, logStuf); 

Answer 2

Two things here. Consider this set of inputs

getInput("Alex", logStuf);
getInput({ "Name": "Alex", "Place": "Malaysia" }, logStuf);

the output is

 0 Alex
    0 Alex
    1 {Name: "Alex", Place: "Malaysia"}

this is because the allUserDdata is declared outside all the functions , so the array already contain the previous input. When the second input is fed to to it will have total two elements, therefore the logStuf will iterate over two elements.

So you can keep this array inside the getInput function.

Secondly allUserDdata is an array , to iterate an array never use for..in

 //var allUserDdata = []; function logStuf(userData) { if (typeof(userData) === "string") { console.log('Here', userData); } else if (Array.isArray(userData)) { userData.forEach(function(item, index) { console.log(index, item) }) } } function getInput(options, callback) { var allUserDdata = []; allUserDdata.push(options); callback(allUserDdata); } getInput("Alex", logStuf); getInput({ "Name": "Alex", "Place": "Malaysia" }, logStuf); 

Answer 3

You have called getInput function twice. Your mistake: you have to set your variable allUserDdata to new array in the function getInput .

 var allUserDdata =[]; function logStuf(userData) { if(typeof(userData)==="string") { console.log(userData); } else if(typeof(userData)==="object") { for(var items in userData) { console.log(items, userData[items]); } } } function getInput(options, callback) { allUserDdata = []; // the mistake: you have to set it to new array allUserDdata.push(options); callback(allUserDdata); } getInput("Alex", logStuf); getInput({"Name":"Alex", "Place":"Malaysia"}, logStuf); 

Answer 4

You have called logStuf function twice

First time it logged 0 Alex

Second time it logged 0 Alex 1 {Name: "Alex", Place: "Malaysia"}

May be you can call logstuff at the second time only

 var allUserDdata = []; function logStuf(userData) { if (typeof(userData) === "string") { console.log(userData); } else if (typeof(userData) === "object") { for (var items in userData) { console.log(items, userData[items]); } } } function getInput(options, callback) { allUserDdata.push(options); if (callback) { callback(allUserDdata); } } getInput("Alex"); getInput({ "Name": "Alex", "Place": "Malaysia" }, logStuf);