Как работает promise?

Question

[Виктор Волков]

Хочу сделать приложение с экраном "старого ЭВМ": на экран машинно выводятся строки со скоростью ~1 символ/10 мс. (реализовал через setInterval) Так как после вывода инфы предполагается какая то работа с ними (ввести данные, нажать на ссылку...), то решил что строки лучше хранить в объекте 'screen'. Важное отступление: необходимо реализовать построчный вывод, так как некоторые сценарии будут предполагать ввод от пользователя информации для "продолжения вывода". Для этого решил в screen у каждой строки ввести параметр "next", который будет нести в себе инфу "нужно ли печатать следующую строку". Так вот, затея печатать массив тупо циклом провалилась (строки печатаются параллельно, да еще и с ускорением (видимо накладываются setInterval)). Необходимо дожидаться окончания печати предыдущей строки. Посоветовали изучить promise, и вот я уже второй день плаваю... от меня ускользает момент, где я могу проверять "а нужно ли мне печатать следующую строку"... если честно, я вообще туго всасываю как они работают... статей уже штук десять прочитал, но.... в общем если кто-то мне на моем примере разжует как эти обещания работают... у того будет классный день!) вот мой говнокод:

'use strict';

    window.tablo = document.getElementById('tablo');
    window.row =0;
    window.step = 0;
    var line = '';



    var screen = {

        '0': {
            'str' : '<pre>        Вычислительный комплекс <br><br>',
            'next': '1'
        },

        '1': {
            'str' : '         <span id="Marintec" class="word_box">1. Калькулятор Маринтека:</span><br>',
            'next': '1'
        },

        '2': {
            'str':  '         расчет точки росы <br><br>',
            'next': '1'
        },

        '3': {
            'str':  '         <span id="DWFT" class="word_box">2. Расчет толщин ЛКП:</span> <br>',
            'next': '1'
        },

        '4': {
            'str':  '         расчет DFT/WFT <br><br>',
            'next': '1'
        },

        '5': {
            'str':   '         <span  id="Convect" class="word_box">3. Конвектор:</span> <br>',
            'next': '1'
        },

        '6': {
            'str':  '         выберите величины:',
            'next': '0'
        }


    };



    function printing (screen) {

        return new Promise (function (resolve, reject) {

            if (screen[row]['next'] == 1) {
                resolve();
            } else {
                reject('дальше строчек нет');
            }


        });



    }

    function one () {

        timer();
    }
    function two () {

        timer();
    }
    function three () {

        timer();
    }



    printing(screen)
        .then(one)
        .then(two)
        .then(three);



    function timer()
    {

        window.tablo.innerHTML = '';
        window.timerPrint1 = window.setInterval(print,  10);


    }



    function print(){


        if(window.step < 100){
            line += screen[window.row]['str'].substr(window.step, 1);
            window.step ++;
            window.tablo.innerHTML = line;
        } else {
            window.clearInterval(window.timerPrint1);
            window.row++;
            window.step  = 0;
            if (window.page < 1 ) {line='';}

        }
        end();


    }

Answer 1

[Robot Chappie]

не совсем понял задачу, но если нужно печатать строки по очереди и с задержкой, которую вы сами можете регулировать, то можно сделать так:

window.tablo = document.getElementById('tablo');

        var screen = {
    
            '0': {
                'str' : '<pre>        Вычислительный комплекс <br><br>',
                'next': '1'
            },
    
            '1': {
                'str' : '         <span id="Marintec" class="word_box">1. Калькулятор Маринтека:</span><br>',
                'next': '1'
            },
    
            '2': {
                'str':  '         расчет точки росы <br><br>',
                'next': '1'
            },
    
            '3': {
                'str':  '         <span id="DWFT" class="word_box">2. Расчет толщин ЛКП:</span> <br>',
                'next': '1'
            },
    
            '4': {
                'str':  '         расчет DFT/WFT <br><br>',
                'next': '1'
            },
    
            '5': {
                'str':   '         <span  id="Convect" class="word_box">3. Конвектор:</span> <br>',
                'next': '1'
            },
    
            '6': {
                'str':  '         выберите величины:',
                'next': '0'
            }
    
    
        };
        var last = Promise.resolve();

        function timer(ms) {
          return new Promise(resolve => {
            setTimeout(() => {
              resolve()
            }, ms)
          })
        }

        for (var i in screen) {
          printing(screen[i]).then(res => {
            last = last.then(() => timer(500).then(() => window.tablo.innerHTML += res))
          })
        }
    
        function printing (screen) {
            return new Promise (function (resolve, reject) {
                if (screen['next'] == 1) {
                  resolve(screen['str']);
                } else {
                  reject('дальше строчек нет');
                }
            });
        }

Comments

[Robot Chappie]

А вообще лучше пользоваться async await код более читаемый и выглядит более последовательным

function timer(ms) {
   return new Promise(resolve => {
       setTimeout(() => {
           resolve()
       }, ms)
   })
}

async function start(data) {
    for (let i in data) {
       await timer(500)
       let res = await printing(data[i])
       window.tablo.innerHTML += res
    }
}
    
function printing (screen) {
    return new Promise (function (resolve, reject) {
       if (screen['next'] == 1) {
          resolve(screen['str']);
       } else {
          reject('дальше строчек нет');
       }
   });
}

start(screen)