Javascript 改变正在发生中的盒子的速度（DOM“改变”事件相关）

我想随时改变盒子的创建速度，即使是在创建盒子的过程中。到目前为止，我有4个按钮可以工作-一个按钮生成随机大小/颜色框，一个按钮增加框的大小，一个按钮重置函数，一个按钮根据输入值的速度毫秒自动创建。如您所见，每次我输入新值时，速度都会发生变化。如上所述，我想要实现的是在不刷新浏览器的情况下自由改变速度。我已经开始改变功能，但被卡住了。谢谢你的阅读

设num=0； var dispDiv=document.getElementByIddisplay； //创建随机框函数 函数创建随机框{ var newDiv=document.createElementdiv； dispDiv.appendChildnewDiv； newDiv.className=框； newDiv.id=box+num； num++； var ranWidth=Math.roundMath.random*50+50； var ranHeight=Math.roundMath.random*50+50； 设r=Math.roundMath.random*255， g=Math.roundMath.random*255， b=Math.roundMath.random*255； newDiv.style.width=ranWidth+px； newDiv.style.height=ranHeight+px； newDiv.style.backgroundColor=rgb+r+，+g+，+b+； } //随机框 document.getElementByIdcreateR.addEventListenerclick，函数{ 创建随机框； }; //增量 var iw=50； var ih=50； document.getElementByIdcreateI.addEventListenerclick，函数{ var newDiv=document.createElementdiv； dispDiv.appendChildnewDiv； newDiv.className=框； newDiv.style.width=iw+px； newDiv.style.height=ih+px； iw+=5； ih+=5； 如果iw>100{ iw=50； } ifih>100{ ih=50； } }; //复位功能 document.getElementByIdreset.addEventListenerclick，函数{ //disDiv.textContent=； document.body.removechildipdiv； dispDiv=document.createElementdiv； dispDiv.id=显示； document.body.appendChilddispDiv； }; //自动创建 document.getElementByIdauto.addEventListenerclick，函数{ var spd=document.getElementByIdspeed.value； 设置间隔函数{ 创建随机框； window.scrollTo 0，document.body.scrollHeight； }，spd； }; //创建长方体时更改速度 document.getElementByIdspeed.addEventListenerchange，函数{ }; * { 框大小：边框框； } 身体{ 保证金：0； 填充：0； } .控制{ 利润率：10px自动； 显示器：flex； 对齐项目：居中； 证明内容：中心； } .controls.create、.remove{ 宽度：150px； 高度：50px； 字体系列：Arial、Helvetica、无衬线字体； 字号：700； 字号：1rem； 边界半径：50px； 颜色：333； 边框：1px实心eee； 利润率：0.3倍； } .盒子{ 宽度：100px； 高度：100px； 背景色：333； 显示：内联块； } 输入{ 宽度：100px； 浮动：对； 填充：10px； 背景色：fff； 边框：1px实心eee； 字体系列：坎布里亚，科钦，佐治亚州，泰晤士报，“泰晤士报新罗马”，衬线； 字体大小：1.5rem； 颜色：333； } 积垢 随机创建 创建增量 重置 自动创建

---

在开始的时候，你可以用你的变量声明它，但我不知道这是否必要，但是我想在清除它之前检查它是否是一个正在运行的计时器

var intvl = false;

首次设置间隔时，请将其指定给变量：

intvl = setInterval(function(){
  CreateRandomBoxes();
  window.scrollTo (0,document.body.scrollHeight);
} , spd);

然后，在change函数中，如果计时器正在运行，则首先调用clearInterval，然后使用新时间启动它：

document.getElementById("speed").addEventListener("change",function(){
  if(intvl !== false) {
    clearInterval(intvl);
  }
  var spd = document.getElementById("speed").value;
  intvl = setInterval(function() {
    CreateRandomBoxes();
    window.scrollTo(0, document.body.scrollHeight);
  }, spd);
});

从我的评论中可以看出：

编辑：我建议设置一个最短的时间限制——每20毫秒出现一个新框是疯狂的

再次编辑：您可以将整个更改功能放入ifintvl！==如果不希望更改计时器值以在计时器尚未启动时自动启动计时器，则执行false block：

document.getElementById("speed").addEventListener("change",function(){
  if(intvl !== false) {
    clearInterval(intvl);
    var spd = document.getElementById("speed").value;
    intvl = setInterval(function() {
      CreateRandomBoxes();
      window.scrollTo(0, document.body.scrollHeight);
    }, spd);
  }
});

---

编辑3:

您可以将setInterval的返回值分配给一个变量，然后在更改函数中使用clearInterval停止当前的定时间隔，再次使用setInterval使用新的时间间隔。非常感谢你。如果我完全理解这个概念，请告诉我。所以用布尔值生成一个名为intvl的变量可以通过使用if语句进行重置，也就是说，如果intvl不等于false，重置clearInterval输入值？对不起，如果我听起来很复杂。另外，您如何设定最低时限？我更改了html中的最小值，但它不会阻止用户键入他们想要的任何数字，只会显示一条消息，询问“请选择一个不小于最小值的值”？请参阅我的回复中的“编辑3”了解最短时间-基本上为我使用的500毫秒的分钟速度设置一个变量，然后在速度字段的更改事件中，检查输入的速度是否小于分钟速度；如果是，则改用minSpeed并更新字段以显示minSpeed值。至于bool——其实没有必要这样做，只是个人喜好——你可以拿出声明，然后

---

连同支票一起完成作业。我只是想在清除计时器之前看看计时器是否正在运行。抱歉，我太忙了，无法检查第一个链接，无法检查编辑3。是的，我意识到我做的是对还是错没有区别，因为它产生的结果是一样的！再次感谢你。你很擅长用像我这样的人能理解的方式解释事情。哦，还有一个问题！我意识到它不会让我重置多次？例如，我从500切换到5000，然后又回到500，我尝试了3000，但不起作用。我看不出你提到的问题。当我将其更改为5000时，它会等待5秒，然后添加一个框，然后我将其更改回500，它每1/2秒添加一个框，然后将其更改为3000，每3秒添加一个框。不确定失败的地方是什么-也许可以从开发工具中找到原因？无论如何，如果您熟悉jQuery，这里有一个jQuery版本：。