JS - 在 setInterval 中暂停播放

Question

我正在寻找一种在 setInterval 函数中制作开始停止按钮的简单方法。但是当停止起作用时，开始不起作用...

var zman = 3000;
function pls() {
    setTimeout(setInterval, zman);
}

var myVar = setInterval(function() {
            var sz;
            sz = Math.floor((Math.random() * 750) + 1);
            document.getElementById("fsize1").style.fontSize = sz+"%";
            console.log(sz);
            }, zman);

和

<button onclick="pls()">play</button>
<button onclick="clearInterval(myVar)">Stop</button>

怎么了？当我还希望在第一次加载时运行的功能时，我可以为谁制作播放按钮？

Answer 1

在 pls() 中，您要求在 3 秒后调用 setInterval()。调用不带参数的 setInterval() 将不会执行任何操作（尽管您的 JS 控制台中应该会出现错误）。

您想一次定义您的函数，然后在单击时调用它，并且首先运行:

var zman = 3000,
  myVar = null;

function pls() {
  if (! myVar)
    myVar = setInterval(sizer, zman);
}

function sizer() {
  var sz = Math.floor((Math.random() * 750) + 1);
  document.getElementById("fsize1").style.fontSize = sz + "%";
  console.log(sz);
}

myVar = setInterval(sizer, zman);

<button onclick="pls()">play</button>
<button onclick="clearInterval(myVar); myVar = null;">Stop</button>

<div id="fsize1">test<div>

Answer 2

var myVar = setInterval(...) 行在 JavaScript 加载后立即运行。但是当按下播放按钮时，setInterval 函数再次运行，但这次没有任何变量引用它。所以点击停止会停止开始的第一个间隔，但由于点击播放时没有引用变量集，一旦设置就无法停止。

尝试这样的事情：

var zman = 3000,
    myVar,
    setFunction = function(){
        clearInterval(myVar);
        myVar = setInterval(function() {
            var sz;
            sz = Math.floor((Math.random() * 750) + 1);
            document.getElementById("fsize1").style.fontSize = sz+"%";
            console.log(sz);
        }, zman);
    },
    clearFunction = function(){
        clearInverval(myVar);
    };

setFunction();

和

<button onclick="setFunction()">play</button>
<button onclick="clearFunction()">Stop</button>

JS - 在 setInterval 中暂停播放

JS - pause play in setInterval

javascript

setinterval