时间戳

首页 > 解决方案 > 创建一个 html 按钮以启动例程并使用此函数将结果写入 HTML 页面

javascript - 创建一个 html 按钮以启动例程并使用此函数将结果写入 HTML 页面

问题描述

这是我的 javascript 循环

 for (var i=1; i <= 100; i++)
{
    if (i % 15 == 0)
        console.log("DuckGoose");
    else if (i % 3 == 0)
        console.log("Duck");
    else if (i % 5 == 0)
        console.log("Goose");
    else
        console.log(i);
}

我最近才开始学习 html 和 java 脚本，试图在夏天结束前成为一名全栈开发人员。这里我试图使用 html 按钮来启动/停止这个循环并使用数字下方列出的函数3. 以下是我目前在 HTML 方面的内容。我真的挂断电话并坚持如何使用此按钮启动/停止此循环。有人可以教我以初学者的方式做到这一点的最佳方法吗？还在学习。谢谢

<body>
  <div>
    <button>Click me</button>

  </div>

</body>

3

function write (o) {
    var el = document.createElement('pre');
    el.innerHTML = JSON.stringify(o, undefined, 2);
    document.body.appendChild(el);
}

标签： javascripthtmlcss

解决方案

因此，对于 for 循环，有一些事情需要注意，您通常不会通过单击按钮来停止它们。一旦 for 循环开始，它将继续运行，直到发生 2 件事中的 1 件，循环的条件评估为 false，或者特别是在代码中它被告知做一些不同的事情（break 或 continue 语句）。因此，您可以通过单击按钮启动循环，但该循环将继续运行直到完成。使用 jQuery，它看起来像这样。

$(document).on('click', '#duckDuckGoose', function() {
  RunDuckDuckGoose();
});

function RunDuckDuckGoose() {
  for (var i=1; i <= 100; i++)
  {
    if (i % 15 === 0)
        console.log("DuckGoose");
    else if (i % 3 === 0)
        console.log("Duck");
    else if (i % 5 === 0)
        console.log("Goose");
    else
        console.log(i);
  }
}

现在，如果您真的需要一个按钮来停止执行，请记住几件事。

  1. for 循环将非常快速地遍历所有 100 个元素。所以你可能想放一些东西来减慢循环，（或增加循环的数量）这样你就可以真正看到停止按钮的工作。
  2. 为了让 for 循环在按钮单击时停止，单击处理程序必须触发 for 循环可以查看的某个变量（在 for 循环之外声明）。

不幸的是，我向您展示的循环方式会阻塞 UI，因此您无论如何都无法通过单击按钮来停止循环，因此您必须研究循环异步，请参阅本文了解如何做到这一点。

我希望这有助于或至少为您指明正确的方向。祝你在新的旅程中好运！

推荐阅读