亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

Javascript,如何在循環中每秒同步調用函數?

Javascript,如何在循環中每秒同步調用函數?

瀟瀟雨雨 2022-07-08 17:06:01
我很難使用 async/await 使其在循環中同步工作。我的小 showChart 所做的是從服務器請求 10 個項目并使用 plotly 在服務器上繪制它。為了讓它像每秒一樣,我喜歡把一些睡眠時間最好精確到 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 回答

?
Helenr

TA貢獻1780條經驗 獲得超4個贊

如果你想循環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);

}

由于這是在一個async函數中,因此await sleep(1000)(注意:not delay,您的基于 promise 的sleep)讓瀏覽器允許它進行任何繪圖等。


這是一個簡單的示例,只需在其中添加一個 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);

    }

})();


查看完整回答
反對 回復 2022-07-08
  • 1 回答
  • 0 關注
  • 168 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號