Javascript 立即停止setTimeout循环，而不完成当前循环

我正在创建一个用户操作的随机选择器。用户点击一个按钮，系统选择两个随机结果（将是视频）

然后页面将交替突出显示两个随机结果-用户可以再次点击按钮，然后选择所需的视频

这一切都很好地工作，但交替高亮显示是通过setTimeout循环完成的，该循环完成当前循环，而不是立即停止

我如何获得它，以便当用户按下“选择”按钮时，flit功能立即停止，而不是在当前循环结束时停止

这是小提琴

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

---

您的问题在

flit（）

函数中-您需要为

setTimeout

调用分配引用，以便对它们调用

cleartimout

。现在，您正在停止在

select（）

方法中调用

flit（）

，但这两个计时器仍在排队等待将来执行。

您的问题在

flit（）

函数中-您需要为

setTimeout

调用分配引用，以便可以对它们调用

cleartimout

。现在，您正在停止在

select（）

方法中调用

flit（）

，但这两个计时器仍在排队等待将来执行。

除了@sholanozie answer，我建议将这些setTimeout放入数组中（即

arrayOfTimeouts

），然后：

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

---

除了@sholanozie answer，我建议将这些setTimeout放入一个数组中（即

arrayOfTimeouts

），然后：

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

---

提示：按

.5-Math.random（）

排序不是洗牌数组的最佳方式，因为它允许

a>b&&b>c&&c>a

为真，这会严重混淆

排序

实现。一个简单的洗牌是

.map（函数（x）{return[Math.Random（），x]；}）.sort（函数（A，b）{returna[0]-b[0]；}）.map（函数（x）{return x[1]；}）

。为了提高效率，用谷歌搜索Knuth Fisher-Yates shuffle。谢谢你——我读过Knuth Fisher-Yates shuffle。我明白其中的道理，但老实说，我在谷歌上搜索的大多数实现都有点过头了！。现在就使用它…要清楚的是，代码不是Knuth Fisher Yates，它只是一种安全、无偏见的洗牌，但没有KFY那么有效。只是一个提示：按

.5-Math.random（）排序不是洗牌数组的最佳方式，因为它允许
a>b&&b>c&&c>a
为真，这会严重混淆
排序
实现。一个简单的洗牌是
.map（函数（x）{return[Math.Random（），x]；}）.sort（函数（A，b）{returna[0]-b[0]；}）.map（函数（x）{return x[1]；}）
。为了提高效率，用谷歌搜索Knuth Fisher-Yates shuffle。谢谢你——我读过Knuth Fisher-Yates shuffle。我明白其中的道理，但老实说，我在谷歌上搜索的大多数实现都有点过头了！。现在就用它…要清楚的是，代码不是Knuth Fisher Yates，它只是一个安全、无偏见的洗牌，但它没有KFY那么有效。当然！忽略了这一点-谢谢。这是为那些感兴趣的人准备的小提琴！忽略了这一点-谢谢。这是为那些感兴趣的人准备的小提琴。不幸的是，这对我不起作用。不过谢谢。不幸的是，这对我不起作用。谢谢你。