clearTimeout(var) not clearing var timeout

Question

Project --> http://codepen.io/urketadic/pen/YpLgBX
Description --> I want to clear a timeout on this function when checkbox is not checked anymore.

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

When you click matrix, little frog should start dancing after 26 seconds, problem is, if you cancel matrix mode and click submit (in 22th second lets say) and then really quick enable matrix mode again, the frog will start dancing after 4 seconds not 26, because timeout was still running.

Problem -> This is not working:

clearTimeout(holder2);

Also tried:

holder2.clearTimeout();

Whole code

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

Answer 1

This is a scope issue. Every time this callback function is executed it will:

1. immediately create new undefined variables for holder and holder2 (because var declarations are hoisted to the top of the function).

2. enter the conditions

   a. either assign values to those new variables

   b. or run clearTimeout on the undefined variables.

At no point are the variables defined and getting cleared.

A solution would be to declare your timeoutID variable outside of the callback, so it persists between calls (first line):

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

Answer 2

It is a scope issue, define variable outside the click handler like following

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