How to use "mock" to perform function only after a while

Question

Hello. I am developing a script that runs when the user arrives at the end of the page scrolling. What I have so far is the following code:

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

The script works. My purpose with the script is an "infinite" pagination. Each time the user arrives at the end of the page, the function prompts PHP, by ajax, new records. But it gets "crazy". As I run it when the scroll pointer is at the end of the scroll, if I continue to scroll and the scrolling is faster than the loading of the files in the append, it runs several times the script, confusing my qtdRegistros and not working the way it should.

How do I delay for a few seconds the execution of this script, remediating the problem, and it is triggered by a user action?

I found something similar to what I need (How to let a function run after some time?). I transcribe below:

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

According to the example the Call would be

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

I tried to

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

Is this the way? I couldn’t implement.

Answer 1

Look at it this way.

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