javascript - 等待执行完成再执行

Question

我想阻止我的点击处理程序执行多次，但它没有按预期工作。我的方法方向正确吗？我希望当用户只单击一次按钮时执行此处理程序。这个处理程序当然可以再次执行(在执行完成后)。

var init = false,
    i = 1;

$('button').on('click', function() {
  if (init) {
    return;
  }

  init = true;

  (function() {
    // this for loop is for example purposes, just to have something running
    for (var i = 0; i < 5000; i++) {
      $('.text').append(i)
    }
    init = false;
  }());

  $('.counter').html(i);
  i++
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button">Button</button>
<div class="text"></div>
<div class="counter"></div>

Answer 1

在这里试试这个解决方案。

首先我们向按钮注册点击处理器:

$('button').on('click', runThis );

这里是 runThis() 处理函数:

function runThis() {
  // register off click handler on button
  $('button').off('click');    
  // loop over i
  for (var i = 0; i < 2000; i++) {
    $('.text').append('<br/>' + i);        
  }
  // if execution finish
  if (i == 2000) {
    // register back handler
    addBack();
  }
}

这里我们回到按钮上的点击处理程序:

function addBack() {
   $('button').on('click', runThis );
}