clearTimeout(var) 不清除 var 超时

clearTimeout(var) not clearing var timeout

项目 --> 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);
    }
});

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

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

这是范围问题。每次执行此回调函数时,它将:

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

    一个。 任一 为这些新变量赋值

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