javascript - 如何对元素 addEventlistener 进行回调 - Javascript

Question

我想在事件监听器完成后进行回调。我的听众是这样看的:

  aktivList.addEventListener("click", function (ev) {
  $("#printMenu").show();
  $("#imageForm").hide();
  $(".polaroid").hide();
  $("#searchId").hide();
  switch (activeFolderGroupeIs) {
    case "butikkOppgaver":
      firbListnerButikk(firebaseAktivListFolder, ev);
      break;
    case "oppgavelisteAnsatte":
      firbListnerBS(firebaseAktivListFolder, ev);
      break;
    case "varebytteOppgaver":
      firbListnerVarebytte(firebaseAktivListFolder, ev);
      break;
    default:
  };
  if (deleteListMode) {
    deleteMode = true;
    //$("#inputFields").slideUp();
    firebaseRefRemove(currentList, firebasePassivListFolder);
    firebaseRefNumberOfChild();
  };

});

完成所有这些代码后，我想运行另一个函数。 (所有这些功能都按原样工作，但如果我在最后添加另一个功能，它会在其他所有功能完成之前运行)。

我的事件监听器将数据放在文本字段中。事件列表器完成后，我想运行另一个函数。我试图搜索回调和 promise ，但没有人谈论将其添加到这段代码中。有什么想法吗？

问候简

Answer 1

您可以发送 custom event在异步操作完成时通知:

使用纯 javascript:

var btn = document.getElementById('btn');
var txt = document.getElementById('txt');
var myevent = new Event('myEvent');
btn.addEventListener('myEvent', function (e) {console.log('finished the job!')});


btn.addEventListener("click", function (ev) {
  setTimeout(function(){
    // async operation here...
    txt.value = 'hi there';
    btn.dispatchEvent(myevent);
  },1000);  
});

<button id="btn">Click Me</button>
<input id="txt" type="text" />

使用 jQuery:

var btn = $('#btn');
var txtEl = $('#txt');

btn.on("click", function(ev) {
  setTimeout(function() {
    // async operation here...
    txtEl.val('hi there');
    btn.trigger('myEvent');
  }, 1000);
});

btn.on('myEvent', function(e) {
  console.log('finished the job!')
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">Click Me</button>
<input id="txt" type="text" />