Question

这是代码

var x = Math.floor( Math.random() * 10 );
setInterval(function () {

    if (x >= 5) {
          $('.test').show();
          setTimeout(function () {
                         $('.test').hide();
                 }, 2000);
    } else {
        x = Math.floor( Math.random() * 10 );
    }

}, x * 1000);

此代码显示.test时具有相同的随机性，就像x=8保持8并且不改变我真正想要的是将x更改为另一个数字

我尝试将var x放置在本地范围内，这表明x中的setInterval是未定义的

我想$('.test')在5到10秒之间随机显示，如7S之后的第一次显示和9秒之后的第二次显示，等等。

Answer 1

使用setTimeout，setInterval将仅在您首次调用它的间隔运行。 setTimeout仅触发一次，然后您可以使用另一个随机变量再次调用它。

roll();

function roll() {
  var x = Math.floor( Math.random() * 10 );
  setTimeout(function () {
    if (x >= 5) {
      $('.test').show();
      setTimeout(function () {
        $('.test').hide();
      }, 2000);
    }
    roll();
  }, x * 1000);
}

.test {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test">Test div</div>

Answer 2

我建议重新排列代码，并创建一个将用setTimeout()调用的函数。无需为此而忘记setInterval() ...就像评论中提到的 epascarello 一样，clearInterval()的第二个参数（间隔的毫秒数）将在您的代码开始运行，该函数将每N毫秒调用一次，其中N是最初配置的间隔。

var x = Math.floor( Math.random() * 10 );

function test(x)
{
    console.log(x);

    if (x > 5)
    {
        $('.test').show();
        setTimeout(() => $('.test').hide(), 2000);
    }

    x = Math.floor( Math.random() * 25 );
    setTimeout(() => test(x), x * 1000);
}

test(x);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test" style="display:none; background:skyblue">TEST</div>

Answer 3

每次显示的延迟都与此片段不同。

function getRandomArbitrary(min, max) {
    return Math.random() * (max - min) + min;
}

function showDiv(x){
  setTimeout(function () {
    $('.test').show();
    setTimeout(function () {
      $('.test').hide();
      x = getRandomArbitrary(5, 10)
      showDiv(x)
    }, 2000);
  }, x * 1000);
}

var x = getRandomArbitrary(5, 10)
showDiv(x)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test" style="display: none">test</div>

Answer 4

var x = Math.floor( Math.random() * 10 );
setInterval(function () {

    if (x >= 5) { // because of this, you get the same number for x. if x >= 5 then the x won't change in this block and has the last value forever.
          $('.test').show();
          setTimeout(function () {
                         $('.test').hide();
                 }, 2000);
    } else {
        x = Math.floor( Math.random() * 10 );
    }

}, x * 1000);

如何在javascript中重置变量

4 个答案: