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

一旦JavaScript加载，行var myVar = setInterval（...）就会运行。但是当按下播放按钮时，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中暂停播放

2 个答案: