-1

Estou desenvolvendo um script que executa quando o usuário chega no final da rolagem da página. O que tenho até agora é o seguinte código:

$(document).ready(function() {
  var posicaoAtual = $(window).scrollTop();

  $(window).scroll(function() {

    var documentSize = $(document).height();
    var sizeWindow = $(window).height();

    posicaoAtual = $(window).scrollTop();

    if (posicaoAtual > (documentSize - sizeWindow)) {
      // Informações
      var qtdRegistros = $("#empresas").children().length;
      var idClientes = $("#idClientes").val();

      // Faz requisição ajax e envia o ID do último registro via método POST
      $.post("carrega-registros.php", {
        qtdRegistros: qtdRegistros,
        idClientes: idClientes
      }, function(resposta) {

        // Coloca o conteudo na DIV
        $("#empresas").append(resposta);
      });
    }
  });

  $(window).resize(function() {
    posicaoAtual = $(window).scrollTop();
    documentSize = $(document).height();
    sizeWindow = $(window).height();
  });
});

O script funciona. Meu propósito com o script é uma paginação "infinita". Cada vez que o usuário chega no final da página, a função solicita ao PHP, por ajax, novos registros. Porém ele fica "louco". Como eu executo ele quando o ponteiro do scroll está no final da rolagem, se eu continuar a rolar e a rolagem for mais rápida do que o carregamento dos arquivos no append, ele executa diversas vezes o script, confundindo meu qtdRegistros e não funcionando da maneira como deveria.

Como faço pra atrasar por uns segundos a execução desse script, remediando o problema, sendo que ele é acionado por uma ação do usuário?

Encontrei algo semelhante ao que eu preciso (https://pt.stackoverflow.com/questions/106209/como-deixar-executar-uma-função-após-algum-tempo). Transcrevo abaixo:

Função

function debounce(fn, delay) {
  var timer = null;
  return function () {
    var context = this, args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function () {
      fn.apply(context, args);
    }, delay);
  };
}

Segundo o exemplo a Chamada seria

var nomeFuncao = debounce(function (event) {
    //Conteúdo da função
}, 250);
$(window).bind('mousewheel', nomeFuncao);

Tentei

$(document).ready(function() {
  function debounce(fn, delay) {
    var timer = null;
    return function() {
      var context = this,
        args = arguments;
      clearTimeout(timer);
      timer = setTimeout(function() {
        fn.apply(context, args);
      }, delay);
    };
  }

  var posicaoAtual = $(window).scrollTop();

  var atualizaRegistros = debounce(function(event) {
    var documentSize = $(document).height();
    var sizeWindow = $(window).height();

    posicaoAtual = $(window).scrollTop();

    if (posicaoAtual > (documentSize - sizeWindow)) {
      // Informações
      var qtdRegistros = $("#empresas").children().length;
      var idClientes = $("#idClientes").val();

      // Faz requisição ajax e envia o ID do último registro via método POST
      $.post("carrega-registros.php", {
        qtdRegistros: qtdRegistros,
        idClientes: idClientes
      }, function(resposta) {

        // Coloca o conteudo na DIV
        $("#empresas").append(resposta);
      });
    }
  }, 250);

  $(window).bind('scroll', atualizaRegistros);

  $(window).resize(function() {
    posicaoAtual = $(window).scrollTop();
    documentSize = $(document).height();
    sizeWindow = $(window).height();
  });
});

Esse é o caminho? Não consegui implementar.

3
  • isso é por que vc esta bindando o scroll então cada vez que a pagina anda ele vai executar a função. tenta bindar quando chegar no fim da pagina. Commented 23/11/2017 às 15:25
  • Oi Jassar! Não entendi exatamente o que quis dizer, sou razoavelmente iniciante em jQuery, Ajax e afins. Pode me exemplificar? Obrigada. Commented 23/11/2017 às 15:27
  • olha meu post abaixo. Commented 23/11/2017 às 15:29

1 Resposta 1

-1

Veja assim.

$(document).ready(function() {
    $(window).scroll(function() {
        if ($(window).scrollTop() + $(window).height() == $(document).height()) {
            var posicaoAtual = $(window).scrollTop();
            var documentSize = $(document).height();
            var sizeWindow = $(window).height();

            $(window).scroll(function() {
                posicaoAtual = $(window).scrollTop();

                if (posicaoAtual >= (documentSize - sizeWindow)) {
                    // Informações necessárias ao PHP
                    var qtdRegistros = $("#empresas").children().length;
                    var idClientes = $("#idClientes").val();

                    // Faz requisição ajax
                    $.post("carrega-registros.php", {
                        qtdRegistros: qtdRegistros,
                        idClientes: idClientes
                    }, function(resposta) {

                        // Coloca o conteudo na DIV
                        $("#empresas").append(resposta);
                    });
                }
            });

            $(window).resize(function() {
                posicaoAtual = $(window).scrollTop();
                documentSize = $(document).height();
                sizeWindow = $(window).height();
            });
        }
    });
});
4
  • Jasar, nenhum dos dois exemplos compilam aqui pra mim :/ O segundo já havia encontrado em pesquisa. O primeiro tentei executá-lo como está, para então iniciar as alterações, mas nada acontece. Commented 23/11/2017 às 15:32
  • o que vc precisa é executar o script que vc fez somente quando o usuário chega no fim da pagina? Commented 23/11/2017 às 15:35
  • Exato. É uma paginação "infinita". Cada vez que o usuário chega no final da página, a função solicita ao PHP, por ajax, novos registros Commented 23/11/2017 às 15:36
  • desta forma que eu fiz agora ele vai rodar o seu script somente quando chegar ao fim da pagina e nao tiver mais scroll Commented 23/11/2017 às 15:39

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .