退出多个用于具有单击功能的循环

时间:2017-03-15 11:29:24

标签: javascript jquery

我有三个for循环。

function slow() {
  for (var j = 0; j < 1000000; j++) {
    (function main(j) {
      setTimeout(function() {
        $(e).trigger("play");
        $(e).trigger("rerender");
        $('#Generation').text('Generation: ' + j);
      }, 1000 * j / 2);
    }(j));
  }
};

剩下的两个for循环是相同的,除了迭代速度差异。

我想使用单个jQuery单击函数退出/中断这三个循环,即。点击一个id为'stop'的按钮。

我该怎么做?

这是我的pen

1 个答案:

答案 0 :(得分:0)

试试这个..

<script>
        $(function(){

            var Break = false; // Declare this above your for loop function

            $("#btnStop").click(function(e){
                e.preventDefault();
                Break = true;
            });

            function slow() {
             for (var j = 0; j < 1000000; j++) {
                 if(Break){break;} // Check this for each 3 for loop
                (function main(j) {
                  setTimeout(function() {
                    $(e).trigger("play");
                    $(e).trigger("rerender");
                    $('#Generation').text('Generation: ' + j);
                  }, 1000 * j / 2);
                }(j));
                }

                // I'm repeating same for loop for illustration. 
                for (var j = 0; j < 1000000; j++) {
                 if(Break){break;} // Check this for each 3 for loop
                (function main(j) {
                  setTimeout(function() {
                    $(e).trigger("play");
                    $(e).trigger("rerender");
                    $('#Generation').text('Generation: ' + j);
                  }, 1000 * j / 2);
                }(j));
                }

                for (var j = 0; j < 1000000; j++) {
                 if(Break){break;} // Check this for each 3 for loop
                (function main(j) {
                  setTimeout(function() {
                    $(e).trigger("play");
                    $(e).trigger("rerender");
                    $('#Generation').text('Generation: ' + j);
                  }, 1000 * j / 2);
                }(j));
                }
            };
        })
    </script>