回调函数执行多次

时间:2018-07-19 05:41:43

标签: javascript callback

我正在学习JavaScript中的回调函数,因此尝试执行使用回调函数的功能

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);

而不是将输出打印为:

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

将输出打印为:

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

我可以知道为什么吗?另外,我正处于学习Javascript的初学者阶段,因此请忽略它是否是一个愚蠢的问题。

4 个答案:

答案 0 :(得分:1)

每次调用getInput时,您将push指向allUserDdata数组,然后将 whole allUserData用管道传输到callback。因此,如果只想记录调用了getInput的项目而不是整个数组,请在该项目而不是数组上调用callback

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);

答案 1 :(得分:1)

这里有两件事。考虑这组输入

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

输出为

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

这是因为allUserDdata是在所有函数之外声明的,因此数组已经包含了先前的输入。当第二个输入被馈送给它时,它将总共有两个元素,因此logStuf将遍历两个元素。

因此,您可以将此数组保留在getInput函数中。

第二个allUserDdata是一个数组,用于迭代一个从未用于..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);

答案 2 :(得分:0)

您已经两次调用getInput函数。您的错误:您必须在函数allUserDdata中将变量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);

答案 3 :(得分:0)

您已经两次调用logStuf函数

第一次登录 0亚历克斯

第二次登录 0亚历克斯 1 {名称:“ Alex”,地点:“ Malaysia”}

也许您只能在第二次打电话给logstuff

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);