Question

我不知道如何停止ns()功能。

我的代码：

<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="utf-8">
    <title>JS test</title>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <style>

    .buttons {
        width: 300px;
        margin: 100px auto 0 auto;
    }

    .number {
        width: 300px;
        margin: 20px auto 0 auto;
        height: 250px;
        border: 1px solid grey;
        overflow-y: scroll;
    }

    </style>
</head>
<body>

<div class="buttons">
    <button type="button" id="start">Start</button>
    <button type="button" id="stop">Stop</button>
</div>

<div class="number"></div>

<script>

$(document).ready(function() {

var min = 0;
var max = 21;

function wout(i) {

    setTimeout(function() {

        $('.number').append(i + '<br>');

    }, i * 500);

}

function ns() {

    for (var i = min; i < max; i++) {

        wout(i);

    }

}

$('#start').click(function() {

    ns();

});

$('#stop').click(function() {

    ns().stop();

});

});

</script>

</body>
</html>

Answer 1

正如评论中所述，您无法停止ns()功能：

循环0到21
排队更新
完成循环
等待更新
更新.number

循环0..21立即有效发生，不会被任何UI事件中断。 Javascript是单线程的，因此for循环在循环时保持该线程。只有在ns()完成后，javascript处理器才会开始处理诸如click和setTimeouts之类的输入。即，在#stop之后0.25秒（即出现第一个数字之前）点击#start时，ns()循环已经已完成。

你可以停止wout()的效果，为什么你可能会问。

一种选择是保留所有超时的记录，并在点击停止时使用clearTimeout。

＆＃13;

var min = 0;
var max = 21;
var timeouts = [];
$("#start").prop("disabled", false);
$("#stop").prop("disabled", true);

function wout(i) {
  var t = setTimeout(function() {
    $('.number').append(i + '<br>');
  }, i * 500);
  timeouts.push(t);
}

function ns() {
  for (var i = min; i < max; i++) {
    wout(i);
  }
}

$('#start').click(function() {
  $("#start").prop("disabled", true);
  $("#stop").prop("disabled", false);
  $(".number").text("");
  ns();
});

$('#stop').click(function() {
  $("#start").prop("disabled", false);
  $("#stop").prop("disabled", true);
  $.each(timeouts, function() {
    clearTimeout(this);
  });
});

＆＃13;

.buttons {
  width: 300px;
  margin: 100px auto 0 auto;
}

.number {
  width: 300px;
  margin: 20px auto 0 auto;
  height: 250px;
  border: 1px solid grey;
  overflow-y: scroll;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="buttons">
  <button type="button" id="start">Start</button>
  <button type="button" id="stop">Stop</button>
</div>

<div class="number"></div>

＆＃13;

Answer 2

setTimeout意味着你的功能将在i * 500中运行，它会在指定的时间内延迟执行你的功能。

如何停止我的javascript函数？

2 个答案: