javascript - 设置一个数组来选择不同的变量onclick

Question

我有一个小的实验设置，我正在编辑它来创建一个随机出现的 div，当你点击它时它会消失。每次单击变量“x”时，我都会遇到问题，它会强制变量“x”与数组中的数字不同。相反，它会在开始时从数组中选择一个数字，并在整个过程中坚持使用它。

分区:

<div id="div" onclick="hide()" style="visibility:hidden;">Doge</div>

JS:

<script type = "text/javascript">  

var interval = [5000, 1000, 10000, 6000, 500];
var x = interval[Math.floor(Math.random() * interval.length)];
setInterval(function(){
document.getElementById('div').style.visibility = "visible";
},x);

function hide(){
document.getElementById('div').style.visibility = "hidden";
var x = interval[Math.floor(Math.random() * interval.length)];
}

</script>

每次您单击该 div 时，我希望它以不同的时间间隔重新出现。

Answer 1

setInterval 获取一个 delay 值并将其用于每个间隔。它不受您更新变量的影响。您需要的是 setTimeout，您将在每次调用 hide 函数时设置它。

var interval = [5000, 1000, 10000, 6000, 500];
var div = document.getElementById('div');

function hide(){
  div.style.visibility = "hidden";
  showIn(randomInterval());
}

function randomInterval() {
  return interval[Math.floor(Math.random() * interval.length)];
}

function showIn(delay) {
  setTimeout(function() {
    div.style.visibility = "visible";
  }, delay);
}

// call directly in the beginning to show the div
showIn(randomInterval());