clearTimeout (вар) не очищая Var тайм-аут

Question

Project ->http://codepen.io/urketadic/pen/YpLgBX
Описание -> Я хочу, чтобы очистить таймаут на эту функцию, если флажок не установлен больше.

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

При нажатии матрицы, маленькая лягушка должна начать танцевать после 26 секунд, проблема, если вы отмените режим матрицы и нажмите на кнопку отправить (в 22th второй позволяет говорить), а затем очень быстро включить режим матрицы снова, лягушки начнет танцевать через 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); 
    } 
}); 

Answer 1

Это вопрос с охватом. Каждый раз, когда эта функция обратного вызова выполняется он будет:

1. немедленно создавать новые неопределенные переменные для holder и holder2 (because var declarations are hoisted to the top of the function).

2. введите условия

   a. либо присваивать значения этим новым переменным

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

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