Javascript 等待执行完成，然后再次执行

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

var init=false，
i=1；
$（'button'）。在（'click'，function（）上{
if（init）{
返回；
}
init=真；
（功能（）{
//这个for循环只是为了让某些东西运行
对于（变量i=0；i<5000；i++）{
$（'.text'）。追加（i）
}
init=false；
}());
$（'.counter'）.html（i）；
我++
});

按钮
尝试在
初始化
的开头，使用
.hide（）
，
.delay（）
，
，
将
属性设置为
禁用
，将
禁用
属性设置为
假


var count=1，
最大值=5000，
init=函数（）{
$（此）.prop（“已禁用”，真）
.off（“点击计数”）；
$（“.counter”）.html（计数）；
计数++；
$（this）.hide（0，函数（）{
对于（变量i=0；i

按钮
在这里尝试此解决方案

首先，我们将click handler注册到按钮：

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

在发现UI被阻塞后，我研究了将循环“分块”为更小的循环的解决方案，允许UI被解锁并执行其他功能

为循环分块

function loop(arr, fn, before, callback) {
    let index = 0,
        step = 50,
        stepTotal = step;

    before();

    (function chunk() {
        while(index < arr.length && index < stepTotal) {
            fn(arr[index], index);
            index++;
        }

        if (index < arr.length) {
            stepTotal+=step;
            setTimeout(chunk, 0);
        } else {
            callback();
        }
    })()
}

函数循环（arr、fn、before、callback）{
设索引=0，
步骤=50，
步骤总数=步骤；
在（）之前；
（函数块（）{
while（索引
您如何知道它执行了两次？根据您的脚本，程序只执行一次。在执行过程中，用户界面被阻止，因此按钮不可单击。我已更新了代码段。您可以看到计数器正在增加，即使执行尚未完成。快速连续多次点击@SumanBogatiwhat about
var i=0测试它$（'button'）。在（'click'，function（）{if（i==0 | | i>=5000）{for（；i<5000；i++）{$（'.text'）。追加（i+“
”）}}}}）
是否
用于循环实际要执行的流程，或者例如？在循环处理的
过程中，是否需要不阻止UI？将
i
4999次添加到
.text
元素的目的是什么？
i
在
if（i==2000）
的
循环之外。感谢您花时间回答这个问题，然而，我问题中的
for
循环只是为了举例only@guest271314虽然我可以从外部访问，因为块没有本地作用域，但它只是一个演示如何关闭/打开事件处理程序。另一种使用UI动画的方法。
function loop(arr, fn, before, callback) {
    let index = 0,
        step = 50,
        stepTotal = step;

    before();

    (function chunk() {
        while(index < arr.length && index < stepTotal) {
            fn(arr[index], index);
            index++;
        }

        if (index < arr.length) {
            stepTotal+=step;
            setTimeout(chunk, 0);
        } else {
            callback();
        }
    })()
}