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.