javascript - 尝试理解 ToDoList 项目中的回调函数

Question

于是我了解到回调函数是一个函数，作为参数传递给另一个函数，在另一个函数内部调用(或执行)回调函数。一个例子如下。 “callback”放在第三个参数处，函数将“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="";

};

附注我知道这个项目不是纯粹基于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 函数调用。