Javascript, как я могу синхронно вызывать функцию каждую секунду в l oop? - PullRequest
Новая
       7

Javascript, как я могу синхронно вызывать функцию каждую секунду в l oop?

0 голосов
/ 20 апреля 2020

Я испытываю трудности с синхронной работой в l oop с использованием async / await. То, что делает мой маленький showChart - это запрашивает 10 элементов с сервера и печатает их на сервере, используя плотно. Чтобы сделать так, чтобы это происходило каждую секунду, я хотел бы поставить некоторое время сна в идеале с точностью до 1000 мс. Однако, похоже, что console.log распечатывает каждую секунду, а функция drawChart вызывается не каждую секунду, а показывает все в последнюю минуту. Как я могу сделать это рисовать каждую секунду? Заранее спасибо ~~ !! 

/**
 * data comes with { status: '' , message:{ result : [{point:''}, {point:''} ...]}} in json format.  
**/
async function  showChart(url, nextPage ){
        let requestUrl  = url+nextPage;
        let resposne = await fetch(requestUrl);
        let data = await resposne.json();
        data = data.message.result;
        let points = await data.map(e=>e.point);
        console.log(fp1Deltas);
        const num =  fp1Deltas.map(  async delta =>{
           delay(1000);
           // await sleep (1000);
           drawChart(delta);
           console.log( delta);
         });
        console.log('done');       
    }

    const sleep = ms=>{
        return new Promise(resolve => setTimeout(resolve, ms));
    }

 const delay = ( ms)  => {
            var start = new Date().getTime();
            var end = start;
            while( end < start + ms ){
                end = new Date().getTime();
            }
    };

    const  drawChart = point =>{

        Plotly.extendTraces('chart1', {
            y: [
                 [point]
            ]
        }, [0]);
    }

    $(document).ready(function () {
        Plotly.plot('chart1', [{
            y: [],
            type: 'line'
        }]);
        showChart(requestLocation, page);
        // fetchData(requestLocation,page);

    }); // end of document ready

1 Ответ

2 голосов
/ 20 апреля 2020

Если вы хотите, чтобы l oop - fplDeltas и вызывали drawChart с каждой дельтой, разделенной секундой, вы можете сделать это следующим образом: 

// So we skip the `sleep` the first time
let first = true;
for (const delta of fplDeltas) {
    // Sleep on all but the first
    if (first) {
        first = false;
    } else {
        await sleep(1000);
    }
    // Draw the chart
    drawChart(delta);
}

Так как это в * Функция 1006 *, await sleep(1000) (примечание: не delay, ваше обещание sleep) уступает браузеру, позволяя ему делать любые рисунки, и т. Д. c.

Вот простой пример добавления элемента DOM в drawChart: 

const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));

async function example() {
    const fplDeltas = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    let first = true;
    for (const delta of fplDeltas) {
        // Sleep on all but the first
        if (first) {
            first = false;
        } else {
            await sleep(1000);
        }
        // Draw the chart
        drawChart(delta);
    }
}

function drawChart(delta) {
    const div = document.createElement("div");
    div.textContent = delta;
    document.body.appendChild(div);
}

(async () => {
    try {
        await example();
        console.log("Done");
    } catch (e) {
        console.error("Error:", e);
    }
})();
...