Dot dotdot dotdot dotdotdot comme chargement ?

Question

Je veux créer des points de chargement, comme ça :

A 0000 millisecondes, le contenu de l'espace est : .

A 0100 milisecondes, le contenu de l'espace est : ..

A 0200 milisecondes, le contenu de la travée est : ...

En boucle.

Quelle est la meilleure façon / la plus facile de le faire ?

Answer 1

    let span = document.querySelector('span');
        i = 0;

    setInterval(() => {
        span.innerText = Array(i = i > 2 ? 0 : i + 1).fill('.').join('');
    }, 500)

loading<span></span>

Answer 2

À mon avis, le moyen le plus simple est une if / else déclaration.

Cependant, un peu de maths pour calculer la longueur des points et la fameuse Array.join - pirater pour répéter le point-char, devrait aussi faire l'affaire.

function dotdotdot(cursor, times, string) {
  return Array(times - Math.abs(cursor % (times * 2) - times) + 1).join(string);
}

var cursor = 0;
setInterval(function () {
  document.body.innerHTML = dotdotdot(cursor++, 3, '.')
}, 100);

Vous pourriez améliorer un peu la lisibilité, en enveloppant la partie "count-up-and-down" et "string-repetition" dans des fonctions séparées.

Answer 3

Avec String.prototype.repeat() vous pouvez faire :

var element = document.querySelector(...);
var counter = 0;

var intervalId = window.setInterval(function() {
    counter += 1
    element.innerHTML = '.'.repeat(1 + counter % 3)
}, 350);

// Use the following to clear the interval
window.clearInterval(intervalId)

Nota: String.prototype.repeat() n'est actuellement pas supporté dans < IE11