javascript - 在回调函数之前调用函数

Question

我正在制作待办事项应用程序，并尝试运行一个应该在回调函数返回输出之前运行的函数。回调 fn 监听点击事件并将用户输入的值输出到屏幕。但在它发生之前，我想首先在顶部输出 h1 元素和一些文本，然后返回回调函数。我怎样才能做到这一点？我尝试在回调上使用 setInterval，但没有帮助。如果用户输入内容并单击添加按钮，我希望文本“待办事项列表”出现在最顶部，然后是实际用户的输入本身。我的代码:

(function () {
var button = document.getElementsByTagName("button");
var userInput = document.getElementById("user_input");
function addItem() {
  var li = document.createElement("li");
  li.innerHTML = userInput.value;
  document.getElementsByTagName("ul")[0].appendChild(li);
  userInput.value = "";
}

function categorize() {
  console.log(document.getElementById("todo").getElementsByTagName('li').length);
  if (document.getElementById("todo").getElementsByTagName('li').length > 0 && document.getElementById("todo").getElementsByTagName('li').length < 2) {
    var h1 = document.createElement("h1");
    h1.innerHTML = "to-do";
    document.getElementById("todo").appendChild(h1);
  }
}

button[0].addEventListener("click", addItem, false);
button[0].addEventListener("click", categorize);

})();

Answer 1

嗯，有一些问题需要在这里得到答案:

• 为什么不在 addItem 中调用 categorize() 函数并仅使用 addItem() 作为回调。
• 为什么要将整个代码包装在 Immediately-Invoked Function Expression 中？
• 如果待办事项列表中只有一个元素，为什么只显示 h1 元素？

我尝试重构您的代码，使其更有意义。这是一个工作演示:

var button = document.getElementsByTagName("button");
var userInput = document.getElementById("user_input");
var entered = false;

function addItem() {
  if(!entered){
     categorize();
  }
  var li = document.createElement("li");
  li.innerHTML = userInput.value;
  document.getElementsByTagName("ul")[0].appendChild(li);
  userInput.value = "";
}

function categorize() {
  entered= true;
    var h1 = document.createElement("h1");
    h1.id = "title";
    h1.innerHTML = "to-do";
 
 document.getElementById("todo").appendChild(h1);
}

button[0].addEventListener("click", addItem, false);

<input type="text" id="user_input" />
<button>Add Item</button>
<div id="todo">
  <ul></ul>
</div>