Javascript 在回调函数之前调用函数

我正在制作待办事项应用程序，并尝试运行一个函数，该函数应该在回调函数返回输出之前运行。回调fn正在侦听click事件，并将用户的输入值输出到屏幕。但在它发生之前，我想首先输出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);

})();

（函数（）{
var button=document.getElementsByTagName（“按钮”）；
var userInput=document.getElementById（“用户输入”）；
函数addItem（）{
var li=document.createElement（“li”）；
li.innerHTML=userInput.value；
document.getElementsByTagName（“ul”）[0].appendChild（li）；
userInput.value=“”；
}
函数分类（）{
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=“待办事项”；
document.getElementById（“todo”）.appendChild（h1）；
}
}
按钮[0]。addEventListener（“单击”，addItem，false）；
按钮[0]。addEventListener（“单击”，分类）；
})();

试试这个：

button[0].addEventListener("click", function () { categorize(); addItem(); });

与此相反：

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

试试这个：

button[0].addEventListener("click", function () { categorize(); addItem(); });

与此相反：

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

---

我的建议是处理在单击事件之前触发的事件

mousedown

button[0].addEventListener.on('mousedown', categorize);

---

我的建议是处理在单击事件之前触发的事件

mousedown

button[0].addEventListener.on('mousedown', categorize);

---

我在下面对你的代码做了一些小的更新。请试着用这个代替

(function () { 
    var button = document.getElementsByTagName("button");
     var userInput = document.getElementById("user_input");

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

    function addItem() {
      categorize(); //since you want this to be     executed before the code in addItem()
      var li = document.createElement("li");
      li.innerHTML = userInput.value;
     document.getElementsByTagName("ul")[0].appendChild(li); 
     userInput.value = "";
     } 

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

（函数（）{
var button=document.getElementsByTagName（“按钮”）；
var userInput=document.getElementById（“用户输入”）；
函数categorize（）{
log（document.getElementById（“todo”）.getElementsByTagName（“li”）.length）；
如果（document.getElementById（“todo”）.getElementsByTagName（'li'）.length>0和document.getElementById（“todo”）.getElementsByTagName（'li'）.length<2）{
var h1=document.createElement（“h1”）；
h1.innerHTML=“待办事项”；
document.getElementById（“todo”）.appendChild（h1）；
} 
} 
函数addItem（）{
categorize（）；//因为您希望在addItem（）中的代码之前执行此操作
var li=document.createElement（“li”）；
li.innerHTML=userInput.value；
document.getElementsByTagName（“ul”）[0].appendChild（li）；
userInput.value=“”；
} 
按钮[0]。addEventListener（“单击”，addItem）；
})()

我在下面对您的代码做了一些小的更新。请试着用这个代替

(function () { 
    var button = document.getElementsByTagName("button");
     var userInput = document.getElementById("user_input");

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

    function addItem() {
      categorize(); //since you want this to be     executed before the code in addItem()
      var li = document.createElement("li");
      li.innerHTML = userInput.value;
     document.getElementsByTagName("ul")[0].appendChild(li); 
     userInput.value = "";
     } 

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

（函数（）{
var button=document.getElementsByTagName（“按钮”）；
var userInput=document.getElementById（“用户输入”）；
函数categorize（）{
log（document.getElementById（“todo”）.getElementsByTagName（“li”）.length）；
如果（document.getElementById（“todo”）.getElementsByTagName（'li'）.length>0和document.getElementById（“todo”）.getElementsByTagName（'li'）.length<2）{
var h1=document.createElement（“h1”）；
h1.innerHTML=“待办事项”；
document.getElementById（“todo”）.appendChild（h1）；
} 
} 
函数addItem（）{
categorize（）；//因为您希望在addItem（）中的代码之前执行此操作
var li=document.createElement（“li”）；
li.innerHTML=userInput.value；
document.getElementsByTagName（“ul”）[0].appendChild（li）；
userInput.value=“”；
} 
按钮[0]。addEventListener（“单击”，addItem）；
})()

这里有一些问题需要回答：

• 为什么不直接调用

  addItem

  中的

  categorize（）

  函数 仅使用

  addItem（）

  作为回调
• 为什么要将整个代码包装在一个中
• 如果Todo列表中只有一个元素，为什么只显示

  h1

  元素

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

var-button=document.getElementsByTagName（“按钮”）；
var userInput=document.getElementById（“用户输入”）；
输入的var=假；
函数addItem（）{
如果（！输入）{
分类（）；
}
var li=document.createElement（“li”）；
li.innerHTML=userInput.value；
document.getElementsByTagName（“ul”）[0].appendChild（li）；
userInput.value=“”；
}
函数分类（）{
输入=真；
var h1=document.createElement（“h1”）；
h1.id=“标题”；
h1.innerHTML=“待办事项”；
document.getElementById（“todo”）.appendChild（h1）；
}
按钮[0]。addEventListener（“单击”，addItem，false）

添加项

这里有一些问题需要回答：


为什么不直接调用
addItem
中的
categorize（）
函数
仅使用
addItem（）
作为回调
为什么要将整个代码包装在一个中
如果Todo列表中只有一个元素，为什么只显示
h1
元素

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


var-button=document.getElementsByTagName（“按钮”）；
var userInput=document.getElementById（“用户输入”）；
输入的var=假；
函数addItem（）{
如果（！输入）{
分类（）；
}
var li=document.createElement（“li”）；
li.innerHTML=userInput.value；
document.getElementsByTagName（“ul”）[0].appendChild（li）；
userInput.value=“”；
}
函数分类（）{
输入=真；
var h1=document.createElement（“h1”）；
h1.id=“标题”；
h1.innerHTML=“待办事项”；
document.getElementById（“todo”）.appendChild（h1）；
}
按钮[0]。addEventListener（“单击”，addItem，false）

添加项

你不能打电话给