clearTimeout(var) 不清除 var 超时答案

【问题标题】：clearTimeout(var) not clearing var timeoutclearTimeout(var) 不清除 var 超时
【发布时间】：2017-01-05 14:45:10
【问题描述】：

项目 --> http://codepen.io/urketadic/pen/YpLgBX
说明 --> 我想在不再选中复选框时清除此功能的超时。

  var holder2 = setTimeout(function() { 
  $("#matrix2").css('display','block'); },26570);

当你点击矩阵时，小青蛙应该在 26 秒后开始跳舞，问题是，如果你取消矩阵模式并点击提交（假设是在 22 秒内），然后再次快速启用矩阵模式，青蛙会在之后开始跳舞4 秒而不是 26 秒，因为超时仍在运行。

问题 -> 这不起作用：

clearTimeout(holder2);

也试过了：

holder2.clearTimeout();

完整代码

$("#Confirm").on('click', function () {
    if (document.getElementById('matrixcheckbox').checked) {
        matrixreset();
        $("#unmute").show();
        $("#matrix2").css('visibility', 'visible');
        player.playVideo();

        var holder = setTimeout(function () {
            $("#matrix1").css('display', 'block');
        }, 1900);
        var holder2 = setTimeout(function () {
            $("#matrix2").css('display', 'block');
        }, 26570);

        $("#pi").css('background-image', 'url(' + 'http://i1007.photobucket.com/albums/af198/GoDHanD/My%20FS%20Profile/RedMatrix.gif' + ')');
    } else {
        matrixreset();
        clearTimeout(holder);
        clearTimeout(holder2);
    }
});

【问题讨论】：

这可能是范围问题，显示整个代码以便我们可以看到holder2 在什么范围内
clearTimeout(holder2); 是正确的方法。 holder2 在您尝试调用它的地方无法访问，或者您同时分配了一个新值。请阅读minimal reproducible example。
我已经更新了整个代码和codepen链接。
你们知道我能做什么吗？
“我不会浪费 30 秒的时间等待青蛙跳舞”是我从未想过我必须写的一句话……阅读@FelixKling 提供的链接;删除任何与手头问题无关的代码。

标签： javascript settimeout cleartimeout

【解决方案1】：

这是一个范围问题。每次执行此回调函数时，它都会：

立即为holder 和holder2 (because var declarations are hoisted to the top of the function) 创建新的未定义变量。
输入条件

一个。或者为这些新变量赋值

b. 或在未定义的变量上运行clearTimeout。

在任何时候都没有定义和清除变量。

一种解决方案是在回调之外声明 timeoutID 变量，因此它在调用之间持续存在（第一行）：

var holder, holder2;

$("#Confirm").on('click', function () {
    if (document.getElementById('matrixcheckbox').checked) {
        matrixreset();
        $("#unmute").show();
        $("#matrix2").css('visibility', 'visible');
        player.playVideo();

        holder = setTimeout(function () {
            $("#matrix1").css('display', 'block');
        }, 1900);
        holder2 = setTimeout(function () {
            $("#matrix2").css('display', 'block');
        }, 26570);

        $("#pi").css('background-image', 'url(' + 'http://i1007.photobucket.com/albums/af198/GoDHanD/My%20FS%20Profile/RedMatrix.gif' + ')');
    } else {
        matrixreset();
        clearTimeout(holder);
        clearTimeout(holder2);
    }
});

【讨论】：

谢谢，问题是我也试过这个，但我在函数变量旁边也有 var，所以它只会创建一个新变量。 ;))

【解决方案2】：

这是一个范围问题，请在点击处理程序之外定义变量，如下所示

var holder,holder2;

$("#Confirm").on('click', function () {
    if (document.getElementById('matrixcheckbox').checked) {
        matrixreset();
        $("#unmute").show();
        $("#matrix2").css('visibility', 'visible');
        player.playVideo();

        holder = setTimeout(function () {
            $("#matrix1").css('display', 'block');
        }, 1900);
        holder2 = setTimeout(function () {
            $("#matrix2").css('display', 'block');
        }, 26570);

        $("#pi").css('background-image', 'url(' + 'http://i1007.photobucket.com/albums/af198/GoDHanD/My%20FS%20Profile/RedMatrix.gif' + ')');
    } else {
        matrixreset();
        clearTimeout(holder);
        clearTimeout(holder2);
    }
});

【讨论】：

谢谢，问题是我也试过这个，但我在函数变量旁边也有 var，所以它只会创建一个新变量。 ;))