Question

我正在创建一个网站，其中有许多容器在人们向下滚动时被激活，如果人们进一步滚动则会被停用。我担心滚动会以这种方式变得非常锯齿状。也许你知道我怎么能改进它？

$(window).scrollEnd(function(){ 
if( 200 < $(this).scrollTop() ) {
        if (1500 > $(this).scrollTop()) { 
                  if(fired == 0){
                    $("#loader_small").css("display", "block");
                    $('.section_two_video').load('test.html');
                    fired = 1;
                  }
            $(".section_two_video").stop().fadeIn("slow");
        }else {
            $(".section_two_video").stop().fadeOut("slow");
        }   
    } 
    else {
        $(".section_two_video").stop().fadeOut("slow");
    };
}, 300)

$.fn.scrollEnd = function(callback, timeout) {          
  $(this).scroll(function(){
    var $this = $(this);
    if ($this.data('scrollTimeout')) {
      clearTimeout($this.data('scrollTimeout'));
    }
    $this.data('scrollTimeout', setTimeout(callback,timeout));
  });
};

Answer 1

你可以强调去抖动功能：

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

来自文档：

返回一个函数，只要它继续被调用，就不会被触发。该函数将在停止调用后被调用 N毫秒。如果传递immediate，则触发该函数前沿，而不是尾随。

使用：

var func = _.debounce(function(e) {    
    // do work
}, 500); // once per 500ms

// Add the event listener
$(window).scrollEnd(func);

根据scrollTop激活容器的功能优化

1 个答案: