Caros tenho um JS que eu executo em minha pagina, porém como o mesmo está lá embaixo, preciso que a animação só execute quando estiver visível para o usuário, alguém sabe qual função eu utilizo: Segue meu JS que conta até um certo numero especifico:
$w.onReady(function () {});
let startNum = 0;
let endNum = 356;
const duration = 4;
$w.onReady(function () {
setInterval(() => {
countUp();
}, duration);
});
function countUp() {
if (startNum <= endNum) {
$w('#texto1').text = startNum.toString();
startNum++;
}
}
$w.onReady(function () {});
let inicio = 0;
let fim = 426;
const duracao = 4;
$w.onReady(function () {
setInterval(() => {
contador();
}, duracao);
});
function contador() {
if (inicio <= fim) {
$w('#texto2').text = inicio.toString();
inicio++;
}
}
$w.onReady(function () {});
let inicial = 0;
let final = 224;
const dura = 4;
$w.onReady(function () {
setInterval(() => {
contagem();
}, dura);
});
function contagem() {
if (inicial <= final) {
$w('#texto3').text = inicial.toString();
inicial++;
}
}
Primeiro de tudo, precisamos falar sobre as três chamadas do método onReady() que existem no seu código. Elas são desnecessárias pois esse método só é chamado uma vez quando a página é carregada. Podemos então eliminar os 3 por apenas 1.
Depois, você precisa refatorar essas 3 funções que fazem a mesma função (com parâmetros diferentes) para usar somente uma que faça tudo que você precisa. Aproveitamos pra colocar o método global setInterval() já nesta mesma função, assim, você só faz a chamada se acionar tal função. Esta função vai receber 4 parâmetros, sendo eles: ínicio, fim, elemento e duração.
function animateText(start, end, textElement, duration) { return setInterval(() => { if (start <= end) { textElement.text = start.toString() start++ } }, duration) }Veja que ele recebe os mesmo parâmetros que você usa, só que os faz genericamente.
Depois você quer iniciar (pelo que entendi) somente quando o elemento estiver visível para o usuário, desta forma você precisa usar o método onViewportEnter():
$w('#texto1').onViewportEnter(() => { animateText(0, 356, $w("#texto1"), 4) })Agora fechamos, seu código ficou assim:
$w.onReady(function () { $w('#texto1').onViewportEnter(() => animateText(0, 356, $w("#texto1"), 4)) $w('#texto2').onViewportEnter(() => animateText(0, 356, $w("#texto2"), 4)) $w('#texto3').onViewportEnter(() => animateText(0, 356, $w("#texto3"), 4)) $w('#texto4').onViewportEnter(() => animateText(0, 356, $w("#texto4"), 4)) }) function animateText(start, end, textElement, duration) { return setInterval(() => { if (start <= end) { textElement.text = start.toString() start++ } }, duration) }Depois me diz como ficou, abraços.