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>