立即停止setTimeout循環而不結束當前循環

我正在創建一個用戶操作的隨機選擇器。用戶點擊一個按鈕，系統會選擇兩個隨機結果（這將是視頻）。立即停止setTimeout循環而不結束當前循環

頁面會交替突出顯示兩個隨機結果 - 用戶可以再次點擊該按鈕，並可以選擇他們想要的視頻。

它的所有工作都很好，但交替突出顯示是用setTimeout循環完成的，而不是立即停止。

我該如何得到它，以便當用戶按下'select'按鈕時，flit函數會立即停止 - 而不是當前循環結束？

這裏的小提琴

http://jsfiddle.net/zandergrin/tmwst5z9/4/

PS - 抱歉，但這是progrees工作 - 我知道有一個在這裏的幾個凌亂位... VAR間隔= 0;

function random() { 
    // create the array 
    var posts = ["post 1", "post 2", "post 3", "post 4", "post 5", "post 6", "post 7", "post 8", "post 9", "post 10"]; 
    var results = posts 

    // Shuffle array 
    .sort(function() { 
     return .5 - Math.random() 
    }) 

    // Get first 2 items 
    .slice(0, 2); 
    var post1 = results[0]; 
    var post2 = results[1]; 

    // add them to the DOM 
    $('#res1').html(post1); 
    $('#res2').html(post2); 

    // loop it 
    interval = setTimeout(random, 100); 

} 

function start() { 
    // Hide the start button 
    $("#start").css("display", "none"); 
    $("#stop").css("display", "block"); 
    // Start the randomizer 
    random(); 

} 


function stop() { 
    // Hide the stop button and stop the random() timeout 
    clearTimeout(interval); 
    $("#stop").css("display", "none"); 
    $("#select").css("display", "block"); 

    // set the inital background colour 
    $("#res1").css({'background': '#123','color': '#fff'}); 
    $("#res2").css({'background': '#eee','color': '#000'}); 

    //create a function to flick between items 
    function flit() { 
     //color the results 
     setTimeout(function() { 
      $("#res1").css({'background': '#eee','color': '#000'}); 
      $("#res2").css({'background': '#123','color': '#fff'}); 
     }, 800); 

     //colour again after a delay 
     setTimeout(function() { 
      $("#res1").css({'background': '#123','color': '#fff'}); 
      $("#res2").css({'background': '#eee','color': '#000'}); 
     }, 1600); 

     //loop it 
     timer = setTimeout(arguments.callee, 1600); 
    }; 
    //run the flick function 
    flit(); 

} 


function select() { 
    // stop thie flit function - doesnt stop immediately! 
    clearTimeout(timer); 
    $("#select").css("display","none"); 
    $("#refresh").css("display", "block"); 
} 

function refresh() { 
    location.reload(); 
}

來源

2014-11-04 JorgeLuisBorges

只是一個提示：排序由'0.5 - 的Math.random（）'並不是洗牌數組的最佳方法，因爲它允許'a> b && b> c && c> a'爲真，這可能會嚴重混淆'sort'實現。一個簡單的shuffle是'.map（function（x）{return [Math.Random（），x];}）。sort（function（a，b）{return a [0] -b [0];}）。 map（function（x）{return x [1];}）'。爲了提高效率，谷歌Knuth Fisher-Yates洗牌。 – 2014-11-04 19:19:52

非常感謝 - 我曾閱讀Knuth Fisher-Yates shuffle。我理解了這個推理，但是如果我誠實的話，我的搜索引擎的大部分實現都會超出我的頭腦。現在就使用它... – JorgeLuisBorges 2014-11-05 09:10:39

要明確一點，該代碼不是Knuth-Fisher-Yates，它只是一個安全，不偏不倚的洗牌，但效率不如KFY。 – 2014-11-05 19:18:12

你的問題是在flit()功能 - 你需要分配引用到setTimeout電話，所以你可以撥打他們clearTimeout。現在，您正在停止flit()在select()方法中的調用，但兩個定時器仍然排隊等候執行。

來源

2014-11-04 19:13:33 soulprovidr

當然！忽略了 - 謝謝。這裏是爲那些感興趣的工作小提琴http://jsfiddle.net/zandergrin/tmwst5z9/6/ – JorgeLuisBorges 2014-11-05 09:38:29

除了@sholanozie答案，我會建議把這些的setTimeout的一個陣列（即arrayOfTimeouts）中，然後：

function select() { 
    // stop thie flit function - doesnt stop immediately! 
    arrayOfTimeouts.forEach(function(setTimer) { 
     clearTimeout(setTimer); 
});

來源

2014-11-04 19:17:58 dman

這不適合我不幸的。不過謝謝。 – JorgeLuisBorges 2014-11-05 09:39:16

立即停止setTimeout循環而不結束當前循環

回答

相關問題