Javascript "..." ожидание зацикливания точки с интервалом

Question

Вместо использования анимированного GIF, я хотел бы вместо текста в диапазоне:

1. Ожидание
2. Ожидание.
3. Ожидание ..
4. Ожидание ...

Я хотел бы пройтись по каждой из них, а затем вернуться к первой в бесконечном цикле. Я также хотел бы контролировать интервал, чтобы ускорить или замедлить его. Я хотел бы, чтобы мой HTML был:

<p>Waiting<span id="dots"></span></p>

И просто циклически изменяйте span innerHTML. Спасибо!

Answer 1

Это, вероятно, установит вас в правильном направлении.Я думаю, что код должен объяснить сам.

function iterateDots(){
    var el = document.getElementById("dots");
    var dotsStr = el.innerHTML;
    var dotsLen = dotsStr.length;

    var maxDots = 3;
    el.innerHTML = (dotsLen < maxDots ? dotsStr + '.' : '');
}

function startLoading(){
    var intervalMs = 300;

    var interval = setInterval("iterateDots()", intervalMs);
}    

Answer 2

dots = document.getElementById('dots'); получит элемент DOM, в который вы хотите поместить точки, а атрибут innerHTML этого элемента позволит вам манипулировать содержимым внутри него.

Что касается изменения содержимого диапазонав определенный интервал взгляните на setInterval() и setTimeout().Вам придется выбрать тот, который лучше всего соответствует вашим потребностям.

Я не собираюсь публиковать реальное решение, так как вы действительно не приложили никаких усилий, но это должно указать вам направильное направление.