Не выполняйте setTimeout, если изменения условий

Question

У меня есть следующий код, который изменяет класс div при прокрутке вниз. Проблема в том, что если вы прокручиваете очень быстро (или, если я помещаю ссылки на div в моем меню), функция тайм-аута не выполняет только последнее условие, а все они как последовательность. Я хочу сделать это, если условие изменяется, когда функция находится в пределах таймаута, чтобы пропустить функцию и проверить следующее условие.

$(document).scroll(function() {  
    var about = jQuery('#hh1').position().top; 
    var portfolio = jQuery('#hh2').position().top; 
    var services = jQuery('#hh3').position().top; 
    var workingprocess = jQuery('#hh4').position().top; 
    var clients = jQuery('#hh5').position().top; 
    var blog = jQuery('#hh6').position().top; 
    var contact = jQuery('#hh7').position().top; 
    var scroll = $(this).scrollTop(); 
    if (scroll >= hh1-90 && scroll < hh3-90 || scroll >= hh5-90 && scroll < hh6-90) 
    {setTimeout('$(".div").addClass("MyClass")',3440);} 
    else 
    { 
    setTimeout('$(".div").removeClass("MyClass")',3440); 
    } 
    }); 

Answer 1

setTimeout(...) метод принимает функцию для выполнения, когда происходит тайм-аут. Вы не отправляете ему функцию.

setTimeout('$(".div").addClass("MyClass")',3440); 

Изменить это

setTimeout(function(){$(".div").addClass("MyClass")},3440); 

, а затем -

Вы должны хранить численный таймаут идентификатор, возвращаемый методом setTimeout(...) и использовать его, чтобы очистить таймаут clearTimeout(...).

Сохранить таймаут идентификатор как

timeoutID = setTimeout(function(){$(".div").addClass("MyClass")},3440); 

, а затем использовать его, чтобы очистить таймер.

clearTimeout(timeoutID); 

Вам не нужно проверить, если тайм-аут произошел или нет, потому что если произошел таймаут, то функция, заданная бы вызывались, и если это не так, вам нужно, чтобы очистить его. Итак, просто очистите таймаут, когда условие изменится.

Answer 2

Попробуйте это:

var addClass = function() { 
    $(".div").addClass("MyClass"); 
} 

var removeClass = function() { 
    $(".div").removeClass("MyClass"); 
} 

if (scroll >= hh1-90 && scroll < hh3-90 || scroll >= hh5-90 && scroll < hh6-90) 
    { 
     setTimeout(myClass,3440); 
    } 
    else 
    { 
     setTimeout(removeClass,3440); 
    }