jQuery обратный вызов в конце прокрутки страницы

Question

У меня есть тег div, для которого установлено переполнение: scroll in css.
У меня есть обратный вызов, который должен вызываться в конце прокрутки элемента, который найден с помощью этого.

$('#details').scroll( function () {  
    if ($(this).height() == ($(this).get(0).scrollHeight - $(this).scrollTop())) {  
        getDetails($("span:last").attr("id"), 3);  
    }  
});  

где getDetails - это обратный вызов, который я использую.он берет последний элемент span внутри div и отправляет его как значение.это все ajax звонки.проблема в том, что getDetails вызывается трижды каждый раз, когда я нахожу в конце div.какие-либо предложения о том, как сделать так, чтобы он вызывался один раз?

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

Answer 1

Вы должны отложить обработку событий, которые имеют постоянную обратную связь, таких как события прокрутки и изменения размера, используя setTimeout / clearTimeout.Когда возникает событие, которое вы хотите обработать, возвращается вызов вашему намеченному обработчику в setTimeout с разумной продолжительностью, но с сохранением ссылки на дескриптор setTimeout.Теперь измените тот же код, чтобы проверить наличие этого дескриптора, и, если он существует, clearTimeout и обновите дескриптор до нового вызова setTimeout.

Вот рабочий пример: http://jsfiddle.net/SBgXA/

       var timeoutHandle;

       var handler =  function(e) {
              alert('raised'); // put your code here
              if ($(this).height() == ($(this).get(0).scrollHeight - $(this).scrollTop()) {  
                getDetails($("span:last").attr("id"), 3);  
              }
       }

       $('#details').scroll(function(e) {
           clearTimeout(timeoutHandle);

           timeoutHandle = setTimeout(function() {
             handler(e);
           }, 100);
       });

Answer 2

Я не проверял это, но что-то в этом роде может работать. Хотя довольно хакерский ...

$('#details').data("didfire", false).scroll( function () {  
    if ($(this).height() == ($(this).get(0).scrollHeight - $(this).scrollTop())) {  
        if(!$(this).data("didfire")) {
            getDetails($("span:last").attr("id"), 3);  

            $(this).data("didfire", true)
            var ref = $(this);
            setTimeout(function(){
                ref.data("didfire", false);
            }, 500);
        }
    }  
});