Question

所以我了解到回调函数是一个函数，它作为参数传递给另一个函数，并且回调函数在另一个函数内部被调用（或执行）。一个例子如下。 “回调”放在第三个参数，该函数将“result”的值传递给“callback”，然后以函数的形式调用“callback”。

var merge = function(array1, array2, callback){  
  var result = [];
  for (var i = 0; i < array1.length; i++) {
   result[i] = array1[i] + array2[i];
  };
callback(result) 
};

var x=merge([1, 2, 3, 4], [5, 6, 7, 8], function(merged) {console.log(merged)});

然而，当我尝试在真实项目中使用回调时，如下面的ToDoList。我知道使用了回调函数（我了解到回调用于事件处理程序??? ），但为什么这些回调的格式与我上面的示例有很大不同？例如，你可以看到我用** **突出显示部分，我相信使用回调...例如，在addTask函数中，“bindTaskEvents”对我来说看起来像一个回调，但为什么它没有被传递给addTask函数作为参数？另外，我没有看到以后以什么格式调用“bindTaskEvents”的位置？

var addTask=function(){
 var listItem=createNewTaskElement(taskInput.value) 
 incompleteTasksHolder.appendChild(listItem);
  **bindTaskEvents(listItem,taskCompleted);**
  taskInput.value="";

};

P.S。我知道这个项目不是纯粹基于JS，它是基于文档对象模型构建的，它似乎使像我这样的初学者想要学习JS的JS的概念复杂化。
---------------以下是完整的项目供您参考--------------------

var taskInput=document.getElementById("new-task");
var addButton=document.getElementsByTagName("button")[0];  //first button
var incompleteTasksHolder=document.getElementById("incomplete-tasks");
var completedTasksHolder=document.getElementById("completed-tasks");


var createNewTaskElement=function(taskString){ //checkbox
   var listItem=document.createElement("li")
   var checkBox=document.createElement("input")
   var label=document.createElement("label")
   var editInput=document.createElement("input") 
   var editButton=document.createElement("button")
   var deleteButton=document.createElement("button")

  checkBox.type="checkbox";
  editInput.type="text";

  editButton.innerText="Edit";
  editButton.className="edit";
  deleteButton.innerText="Delete";
  deleteButton.className="delete";

  label.innerText = taskString;

  listItem.appendChild(checkBox);
  listItem.appendChild(label);
  listItem.appendChild(editInput);
  listItem.appendChild(editButton);
  listItem.appendChild(deleteButton);

return listItem;
}

var addTask=function(){
console.log("Add task..."); 
 var listItem=createNewTaskElement(taskInput.value) 
 incompleteTasksHolder.appendChild(listItem);
  **bindTaskEvents(listItem,taskCompleted);**
  taskInput.value="";

};

var editTask=function(){
console.log("edit task...");  

var listItem=this.parentNode;

var editInput=listItem.querySelector("input[type=text]");
var label=listItem.querySelector("label");
var containsClass=listItem.classList.contains("editMode");

  if(containsClass){
  label.innerText=editInput.value;
  }else{
  editInput.value=label.innerText;
  }
  listItem.classList.toggle("editMode");  

  };

var deleteTask=function(){
console.log("delete task...");


  var listItem=this.parentNode;
  var ul=listItem.parentNode;
  ul.removeChild(listItem);
}

var taskCompleted=function(){
console.log("Completed task..."); 
var listItem= this.parentNode
completedTasksHolder.appendChild(listItem);
  **bindTaskEvents(listItem, taskIncomplete);**
}

var taskIncomplete=function(){
console.log("Incompleted task...");
  var listItem= this.parentNode;
incompleteTasksHolder.appendChild(listItem);
  **bindTaskEvents(listItem, taskCompleted);**

}

var bindTaskEvents=function(taskListItem,checkBoxEventHandler){        
console.log("Bind list item events");  
    var checkBox = taskListItem.querySelector('input[type=checkbox]');
    var editButton = taskListItem.querySelector('button.edit');
    var deleteButton = taskListItem.querySelector('button.delete');
    editButton.onclick = editTask;
    deleteButton.onclick = deleteTask;
    checkBox.onchange = checkBoxEventHandler; 
};


var ajaxRequest=function(){
console.log("AJAX request");
}

addButton.addEventListener("click",addTask);;
addButton.addEventListener("click",ajaxRequest); 

for(var i=0;i<incompleteTasksHolder.children.length;i++){
**bindTaskEvents(incompleteTasksHolder.children[i], taskCompleted);**

}

for(var i=0;i<completedTasksHolder.children.length;i++){
**bindTaskEvents(completedTasksHolder.children[i], taskIncomplete);**

}

Answer 1

这里没有“回调”：

var addTask=function(){
  var listItem=createNewTaskElement(taskInput.value) 
  incompleteTasksHolder.appendChild(listItem);
  bindTaskEvents(listItem,taskCompleted); // <-- this is not a callback
  taskInput.value="";
};

这里发生的一切都是函数（addTask）正在调用另一个函数（bindTaskEvents）。没有什么特别的，它只是调用一个像你在其他任何地方的功能。

为了使它成为回调，它必须作为参数提供给函数：

var addTask=function(someCallback){
  var listItem=createNewTaskElement(taskInput.value) 
  incompleteTasksHolder.appendChild(listItem);
  someCallback(listItem,taskCompleted); // <-- this IS a callback
  taskInput.value="";
};

但事实并非如此。

在结构上，我在此代码中看到的最接近的“回调”是：

var bindTaskEvents=function(taskListItem,checkBoxEventHandler){        
  console.log("Bind list item events");  
  var checkBox = taskListItem.querySelector('input[type=checkbox]');
  var editButton = taskListItem.querySelector('button.edit');
  var deleteButton = taskListItem.querySelector('button.delete');
  editButton.onclick = editTask;
  deleteButton.onclick = deleteTask;
  checkBox.onchange = checkBoxEventHandler; // <-- here
};

这本身并不是“回调”，但它在概念上与类似。在这种情况下，bindTaskEvents期望函数作为参数。但是它不是调用该函数（就像回调一样），而是使用该函数作为它正在创建的元素的事件处理程序。因此，该函数将在页面生命周期的某个时间点调用，以便处理该事件，但不能直接由bindTaskEvents函数调用。

尝试了解ToDoList项目中的回调函数

1 个答案: