无法设置间隔时间

时间:2014-03-27 13:48:43

标签: javascript jquery

编辑:我插入了丢失的代码,以便你们可以看到boardGen()函数。我把它减少到4箱。但它仍然无法奏效。我可以不在boardGen()函数上使用setInterval吗?

我编写的代码允许我在5X5板上生成随机字母。生成字母的代码效率很低(每个tile都有一堆switch语句),但是每次加载页面时它都能很好地工作并生成一组新的字母。

我试图让我的随机字母生成器每隔几秒钟切换一次代码来刷新。我研究并发现setInterval函数允许我这样做。我试图按照文档中的示例进行操作,但代码只执行一次。 setInterval唯一的作用是第一次执行所需的时间。但是在执行之后,它就会停止。我知道我离开了boardGen功能。它超长,因为我不那么好。我只是想看看我的setInterval代码是否正确。有人可以帮忙。

   <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>LetterTouch</title>
</head>

  <link rel = "stylesheet" type="text/css" href="gameboard.css">
  <!-- <link href="scripts/jquery-ui-1.10.4.custom.css" rel="stylesheet" type="text/css"/>-->
  <script type="text/javascript" src="scripts/jquery-1.10.2.js"></script>
  <script type="text/javascript" src="scripts/jquery-ui-1.10.4.custom.js"></script>

  <script type="text/javascript">

var nIntervId;

function changeLetters() {
    nIntervId = setInterval(boardGen, 1);
    }

function boardGen() {
// inefficient way of generating random letters for each tile//
    var randomNumber = Math.floor((Math.random()*4)+1);

    switch (randomNumber) {
        case 1:
            $("document").ready(function() {
                $("#squares").selectable();
                 $(".A1").replaceWith("<li>A</li>");
      });
       break;

        case 2:
        $("document").ready(function() {
                $("#squares").selectable();
                 $(".A1").replaceWith("<li>B</li>");
      });
      break;

        case 3:
        $("document").ready(function() {
                $("#squares").selectable();
                 $(".A1").replaceWith("<li>C</li>");
      });
      break;

        case 4:
        $("document").ready(function() {
                $("#squares").selectable();
                 $(".A1").replaceWith("<li>D</li>");
      });
      break;




      }

    }

 </script>

<body onload="changeLetters();">



<ol id="squares">
  <li class="A1"></li>
  <li class="A2"></li>
  <li class="A3"></li>
  <li class="A4"></li>
  <li class="A5"></li>
  <li class="B1"></li>
  <li class="B2"></li>
  <li class="B3"></li>
  <li class="B4"></li>
  <li class="B5"></li>
  <li class="C1"></li>
  <li class="C2"></li>
  <li class="C3"></li>
  <li class="C4"></li>
  <li class="C5"></li>
  <li class="D1"></li>
  <li class="D2"></li>
  <li class="D3"></li>
  <li class="D4"></li>
  <li class="D5"></li>

</body>
</html>

2 个答案:

答案 0 :(得分:1)

您的代码有效(最新的Firefox)。这是另一回事。

(只是将间隔更改为5000并为您添加了警报)
http://jsfiddle.net/6U7xM/1/

FYI为了您的代码的可读性,最好在boardGen() 中使用它之前定义changeLetters()

答案 1 :(得分:-3)

var nIntervId;

function changeLetters() {
    nIntervId = setInterval(boardGen, 500);
    function boardGen() {
        alert(1);
    }
}