Hello. I'm developing a script that runs when the user arrives at the end of 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 bottom of the page, the function requests PHP, by ajax, new records. But he gets "crazy." As I run it when the scroll pointer is at the end of the scroll, if I continue scrolling and the scrolling is faster than loading the files in the append, it runs the script several times, confusing my qtdRegisters and not working the way as it should.
How do I delay for a few seconds the execution of this script, remedying the problem, and is it triggered by a user action?
I found something similar to what I need ( How to let a function run after a while? ). 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
$(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 was unable to implement.