JavaScript随机睡眠一个循环？

Question

我正在创建一个URL开启者。我想延迟打开每个链接。时间应该是随机的。从2秒到9秒。

任何人都可以帮助我如何做到这一点？ 我尝试了一种方法，我发现堆栈。但链接在固定时间后打开。即5秒...或任何时候我给...所以如何以随机的方式做到这一点？

代码形式：

<form method="post" action=""> 
     <br /> 
     <textarea name="list_urls" id="list_urls" cols="60" rows="20"></textarea> 
     <br /> 
     <br /> 
     <input value="Open URLs" class="submit" type="button" onClick="open_all();"> 
     <br /> 
     <input type="reset" value="Reset!"> 
     <br/> 
    </form> 

代码JS

<script> 
    function sleep(milliseconds) { 
    var start = new Date().getTime(); 
    for (var i = 0; i < 1e7; i++) { 
    if ((new Date().getTime() - start) > milliseconds){ 
     break; 
    } 
    } 
    } 
    function open_all() { 
     var urls = document.getElementById("list_urls").value; 
     var urls = urls.split(/\s+/); 
     var totalno = urls.length; 
     var s; 
     for (var i = 0; i < totalno; i++) { 
      s = urls[i]; 
      if (s) { 
       if (s.substr(0, 7) != 'http://' && s.substr(0, 8) != 'https://') 
        s = 'http://' + s; 
        sleep(5000); 
        window.open(s) 
      } 
     } 
     return false; 
    } 
    </script> 

Answer 1

你只需要使用window对象的setTimeout()方法。

的代码不会在这里的堆栈溢出片段的环境中运行，但你可以看到它的工作here。

一对夫妇的其他东西：

• 不要使用内嵌HTML事件处理属性（onclick， onmouseover等），为他们创造面条代码，造成重复的代码 ，不照W3C DOM事件标准。
• 如果您不在任何地方提交数据，请勿使用<form>。

// Get DOM References 
 
var btnGo = document.getElementById("go"); 
 
var btnReset = document.getElementById("reset"); 
 
var list = document.getElementById("list_urls"); 
 

 
// Set up event handlers: 
 
btnGo.addEventListener("click", open_all); 
 
btnReset.addEventListener("click", function(){ urls.value = ""; }); 
 

 
function open_all() { 
 
    // Separate input into an array 
 
    var urls = list.value.split(/\s+/); 
 
    
 
    // Loop over the items in the array 
 
    urls.forEach(function(value){ 
 
    
 
    // Get random number between 2 and 8 
 
    var delay = (Math.floor(Math.random() * 7)) + 2; 
 
    
 
    // Append "http://" if no protocol present 
 
    var url = (value.indexOf('http://') === -1 && value.indexOf('https://') === -1) ? 
 
     'http://' + value : value; 
 
    
 
    // Call the open function after waiting the delay times 1000 (for milliseconds) 
 
    setTimeout(function() { open(url); }, delay * 1000); 
 
    
 
    }); 
 
} 
 

 
function open(s){ 
 
    window.open(s) 
 
}

<div> 
 
    <textarea name="list_urls" id="list_urls" cols="60" rows="20"></textarea> 
 
</div> 
 
<div> 
 
    <input value="Open URLs" class="submit" type="button" id="go"> 
 
</div> 
 
<div> 
 
    <input type="button" value="Reset!" id="reset"> 
 
</div>

Answer 2

使用setTimeout与Math.random()

function createATimeout(link) { 
    var duration = Math.floor(Math.random() * 6) + 1; // b/w 1 and 6 
    setTimeout(function() { 
    window.open(link); 
    }, duration); 
} 
    function open_all() { 
     var urls = document.getElementById("list_urls").value; 
     var urls = urls.split(/\s+/); 
     var totalno = urls.length; 
     var s; 
     for (var i = 0; i < totalno; i++) { 
      s = urls[i]; 
      if (s) { 
       if (s.substr(0, 7) != 'http://' && s.substr(0, 8) != 'https://') 
        s = 'http://' + s; 
        createATimeout(s); 
      } 
     } 
    } 


<form method="post" action=""> 
     <br /> 
     <textarea placeholder="enter list of urls" name="list_urls" id="list_urls" cols="60" rows="20"></textarea> 
     <br /> 
     <br /> 
     <input value="Open URLs" class="submit" type="button" onclick="open_all();"> 
     <br /> 
     <input type="reset" value="Reset!"> 
     <br/> 
    </form>