设置一个数组以选择不同的变量onclick

Question

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

DIV：

<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()); 

Answer 2

问题在于你的随机世代数，大部分时间都是一次又一次地重复相同的值。

Link of your random number generation output

尝试解决这一点，再试一次。

Answer 3

<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)]; 
 
setInterval(function(){ 
 
document.getElementById('div').style.visibility = "visible"; 
 
},x); 
 
} 
 

 
</script>