Функция стрельбы несколько раз при быстрой прокрутке

Question

Прежде всего, я не очень продвинутый код и имею тенденцию делать это только частично, поэтому, пожалуйста, извините весь ужасный/уродливый код! Я ценю, что уже есть некоторые решения, но я не могу заставить кого-либо из них работать с моим кодом, поэтому я бы очень хотел помочь!

Я использую сетку изотопов и пытаюсь установить бесконечный свиток. Я хочу загрузить 10 изображений в то время, когда пользователь прокручивается вниз, беря эти изображения из массива и добавляя их к временному div.

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

$(window).scroll(function() { 

var scrollTop = $(window).scrollTop(); 
var windowHeight = $(window).height(); 
var docuHeight = $(document).height(); 

if(scrollTop + windowHeight == docuHeight){ 

    nextTenImages = imagesData.splice(0,10); 
    var content = "" 
    for (var i = 0; i < nextTenImages.length; i++) { 
     content += 
     "<div class='box " + nextTenImages[i]["type"] + "'" + ">" + 
     "<div class='box-wrapper'>" + 
      "<img src='" + nextTenImages[i]["src"] + "' />" + 
     "</div>" + 
     "</div>" 
    }; 

    $('body').append('<div id="temp-load"><div id="grid"></div></div>'); 
    $('#temp-load > #grid').append(content) 

    $('#temp-load > #grid').children().css({ 
     opacity: 0 
    }); 

    var toAdd = $('#temp-load > #grid').html(); 

    $container.isotope('insert', $(toAdd), function(){ 
    $container.children().css({ 
     opacity: 1 
    }); 
    $('#temp-load').remove(); 
    }); 

} 

}); 

Answer 1

Unbind что конкретное событие прокрутки до вашего отсроченного завершения операции, чтобы предотвратить накопление большего количества триггеров событий, которые создают поведение дублирования, как в вашем случае.

var winCached = $(window), 
 
    docCached = $(document) 
 

 
var currLeng = 0; 
 

 
function addContent() { 
 
    dettachScrollEvent(); 
 
    setTimeout(function() { //this timeout simulates the delay from the ajax post 
 
    for (var i = currLeng; i < currLeng + 100; i++) 
 
     $('div').append(i + '<br />'); 
 
    currLeng = i; 
 
    console.log("called loader!"); 
 
    attachScrollEvent(); 
 
    }, 500); 
 

 
} 
 

 
function infiNLoader() { 
 
    if (winCached.scrollTop() + winCached.height() > docCached.height() - 300) { 
 
    addContent(); 
 
    //alert("near bottom! Adding more dummy content for infinite scrolling"); 
 
    } 
 
} 
 

 
function attachScrollEvent() { 
 

 
    winCached.scroll(infiNLoader); 
 
} 
 

 
function dettachScrollEvent() { 
 
    winCached.unbind('scroll', infiNLoader); 
 
} 
 
addContent();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div></div>

Answer 2

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

var timer; 

function scrollEvt() { 
    /* scroll actions */ 
} 

$(window).scroll(function() { 
    /* clear the old timeout */ 
    clearTimeout(timer); 
    /* wait until 400 ms for callback */ 
    timer = setTimeout(scrollEvt, 400); 
}); 

Использование других способов может привести к проблемам (например, сравнивая (window.performance || Date).now()) ...