スクロールイベントで複数の火災を防ぐ方法は？

Question

私は、複数回のスクロールイベントを防止しようとしています。 250msで1つのイベントのみ。このため私は以下のインターネットでデバウンス機能を見つけました。しかし、私はそれを正しく使うことができませんでした。なにが問題ですか？関数を返すdebounce機能以来

function debounce(func, wait, immediate) { 
    var timeout; 
    return function() { 
    var context = this, args = arguments; 
    var later = function() { 
     timeout = null; 
     if (!immediate) func.apply(context, args); 
    }; 
    var callNow = immediate && !timeout; 
    clearTimeout(timeout); 
    timeout = setTimeout(later, wait); 
    if (callNow) func.apply(context, args); 
    }; 
}; 

// my code.. 
$(window).on('scroll', function (e) { 

    debounce(function() { 
    // The stuff below doesn't work. 
    var scrollTop = $(window).scrollTop(); 
    if (scrollTop > 50) { 
     $('.title').addClass('fixedPosition'); 
    } else { 
     $('.title').removeClass('fixedPosition'); 
    }  
    }, 250); 

}); 

Answer 1

、あなたはまだそれを呼び出す必要があります：

$(window).on('scroll', function (e) { 
    debounce(function() { 
     var scrollTop = $(window).scrollTop(); 
     if (scrollTop > 50) { 
      $('.title').addClass('fixedPosition'); 
     } else { 
      $('.title').removeClass('fixedPosition'); 
     }  
    }()/*note the call here*/, 250); 
}); 

機能myLogicが自動的に呼び出されます、一方、これは別の関数であなたのデバウンスロジックをラップと同じではありません：

function myLogic(){ 
    var scrollTop = $(window).scrollTop(); 
    $('.title').toggleClass('fixedPosition', scrollTop > 50); 
} 

$(window).on('scroll', debounce(myLogic, 250));