Como utilizar “debounce” para executar função apenas depois de um tempo – jquery ajax front-end

2 Dezembro, 2018 admin 0 Comments ajax, front-end, jquery

Pergunta:

Olá. 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 (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.

Autor da pergunta Aryana Valcanaia

Resposta :

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

Fonte