0

Нужно выводить результат работы скрипта на страницу через заданные интервалы времени (например, 1000 мс). Есть функция, которая перебирает объекты в массиве, и при совпадении условия выводит характеристики объекта. Собственно, код:

function sleep(ms) {
        let t = (new Date()).getTime();
        let i = 0;
        while (((new Date()).getTime() - t) < ms) {
            i++;
        }
    }

function isNew_Car(obj) {
        sleep(1000);
        if (obj.year >= document.getElementById('year').value) {
            GARAGE_NEW.push(obj);

            document.getElementById('result').textContent += `
Name:  ${obj.name}
Year:  ${obj.year}
Price: ${obj.price}
<br>
`;
           console.log(GARAGE_NEW);

        }

    }


function check_car() {
        for (let i = 0; i< GARAGE.length; i++) {
            isNew_Car(GARAGE[i])
        }
    }

В GARAGE хранится массив объектов вида

{name: "Honda", year: 2015, price: 12000}

Проблема вот в чем: пауза при выводе элементов на страницу игнорируется, они выводятся все скопом уже после того, как цикл прошелся по всему массиву. При этом для отладки попробовал выводить в консоль - всё четко, выводится раз в 1 секунду, проблема только с DOM. Вместо textContent пробовал передавать через innerHTML и createElement, результат аналогичный. Замена sleep() на setTimeout() тоже не дает нужного эффекта. Что я делаю не так и как это исправить?

1 ответ 1

0

sleep в данном случае тормозит всю страницу и пока эта функция выполняется ни цикл дальше не идет, ни отрисовка не осуществляется.

Вместо этого, нужно использовать setTimeout, например задавая интервалы пропорциональные индексу:

for (let i = 0; i< GARAGE.length; i++) {
    setTimeout(()=>isNew_Car(GARAGE[i]), i*1000);
}
2
  • Действительно, так работает, спасибо. Осталось понять, почему console.log не тормозится, а отрисовка тормозится, они ведь в одной итерации срабатывают. Прошу не пинать за нубские вопросы
    – nyakove
    4 дек 2018 в 13:14
  • @MikhailDykun, например, потому что console.log выполняется после sleep, и все ок, а отрисовка выполнится, когда закончится выполняться check_car
    – Grundy
    4 дек 2018 в 13:15

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.