Ошибка функции остановки Javascript

Question

У меня жуткое время, пытаясь понять, почему мое событие Javascript OnClick не останавливает выполнение этой функции.

Вот что я пытался до сих пор:

var Enabled = "true"; 
$(document).ready(function(){ 
$(".ui-state-error").click(function() { 
    $('.ui-state-error').css({'display':'block'}); 
    var Enabled = "false"; 
    }); 
}); 
$(function() { 
    var $divs = $('div', '#containerAlert'), 
     total = $divs.length, 
     counter = 0, 
     showDiv = function() { 
     if (Enabled == "true") { 
      $divs.stop().hide(); 
      $($divs[counter]).fadeIn('slow'); 
      counter = (counter + 1) % total; 
      setTimeout(showDiv, 6000); 
     } 
     }; 
    $divs.hide(); 
    showDiv(); 
}); 

Идея когда переменная Enabled установлена ​​в ложь, (что было бы один раз .ui-состояние ошибки щелкают), то блок скрытие и угасание в div's прекратят его выполнение.

Что я делаю неправильно?

Answer 1

Вы используете var Enabled = "false" внутри обработчика кликов, что означает, что вы создаете локальную переменную с именем Enabled внутри обработчика кликов вместо обновления значения глобальной переменной.

var Enabled = true; 
$(document).ready(function() { 
    $(".ui-state-error").click(function() { 
     $('.ui-state-error').css({ 
      'display': 'block' 
     }); 
     //when you use var here the a new local variable is created instead of changing the value of the global one 
     Enabled = false; 
    }); 
}); 
$(function() { 
    var $divs = $('div', '#containerAlert'), 
     total = $divs.length, 
     counter = 0, 
     showDiv = function() { 
      if (Enabled) { 
       $divs.stop().hide(); 
       $($divs[counter]).fadeIn('slow'); 
       counter = (counter + 1) % total; 
       setTimeout(showDiv, 6000); 
      } 
     }; 
    $divs.hide(); 
    showDiv(); 
});