Question

我想在eventlistner完成后进行回调。我的列表工具看起来像这样：

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

}）;

当所有这些代码完成后，我想运行另一个函数。（所有这些函数都按原样运行，但是如果我在最后添加另一个函数，它会在其他所有函数完成之前运行。）

我的事件列表器将数据放入文本字段。当事件列表器完成时，我想运行另一个函数。我试图搜索回调和承诺，但没有人谈到将它添加到此代码中..任何想法？

问候Jan

Answer 1

您可以调度custom event以在异步操作完成时通知：

使用纯javascript：

＆＃13;

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

＆＃13;

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

＆＃13;

使用jQuery：

＆＃13;

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

＆＃13;

<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" />

＆＃13;

如何在元素addEventlister上进行回调 - Javascript

1 个答案: