Question

我正处于javascript课程的中间，正在玩一个非常基本的项目，我需要生成随机形状（只是正方形和圆形），这些形状应该出现在页面上的随机位置。单击开始按钮后，随机延迟后需要出现第一个形状。

最初我是在画布上绘制形状但是因为绘制的形状需要稍后为项目点击，因为我只需要生成正方形和圆形，我已经决定只使用形状，大小不同的div和位置。单击按钮后，我的形状看起来很好，但我很难添加功能的延迟。这是我的代码没有延迟：

  <button id="start">Start</button>
  <div id="shape"></div>

  <script type="text/javascript">

    function generateRandomShape() {
      var randomColor = ["red", "green", "blue", "orange", "purple"];
      var radiusOptions = ["50%", ""]
      document.getElementById("shape").style.backgroundColor = randomColor[Math.floor(Math.random() * randomColor.length)];
      document.getElementById("shape").style.borderRadius = radiusOptions[Math.floor(Math.random() * radiusOptions.length)];
      document.getElementById("shape").style.height = Math.random() * 500;
      document.getElementById("shape").style.width = document.getElementById("shape").style.height;
      document.getElementById("shape").style.marginLeft = Math.random() * 1000;
      document.getElementById("shape").style.marginTop = Math.random() * 400;
    };

    document.getElementById("start").onclick = generateRandomShape;

  </script>

我尝试按如下方式修改onclick调用：

        document.getElementById("start").onclick = setTimeOut(generateRandomShape,2000);

但是现在函数在没有点击按钮的情况下在2秒后触发（我将使用Math.random将随机元素添加到时间延迟一旦我开始工作！）。无法解决为什么在事件处理程序之前触发它的逻辑。

Answer 1

这一行：

document.getElementById("start").onclick = setTimeOut(generateRandomShape,2000);

使setTimout函数立即运行，因为一旦遇到该函数，就会执行该函数，返回值（如果有）是分配给onclick属性的函数。

将行更改为：

document.getElementById("start").onclick = function(){setTimeout(generateRandomShape,2000)};

因此包含setTimeout指令的函数存储在onclick属性中，并且在click事件发生之前不会运行。此外，您将setTimeout错误地标记为setTimeOut。

此外，您的type=text/javascript代码中不需要script。

除此之外，你的功能写得不是很好。您应该只扫描一次元素而不是代码的每一行，如下所示：

function generateRandomShape() {

  var randomColor = ["red", "green", "blue", "orange", "purple"];
  var radiusOptions = ["50%", ""]
  var shape = document.getElementById("shape");  // <-- Just scan for the element once
  
  shape.style.backgroundColor = randomColor[Math.floor(Math.random() * randomColor.length)];
  shape.style.borderRadius = radiusOptions[Math.floor(Math.random() * radiusOptions.length)];
  shape.style.height = Math.random() * 500;
  shape.style.width = shape.style.height;
  shape.style.marginLeft = Math.random() * 1000;
  shape.style.marginTop = Math.random() * 400;
};

// It's better to use modern standards for event wiring (.addEventListener)
// instead of event properties (.onclick)
document.getElementById("start").addEventListener("click",function(){ 
  // You had mis-capitalized setTimeout as setTimeOut!
  setTimeout(generateRandomShape,2000)
});

<button id="start">Start</button>
<div id="shape">This is the shape element.</div>

setTimeOut导致函数在单击按钮之前触发

1 个答案: