首頁 > web前端 > js教程 > 主體

[Javascript]避免ProgressBar不移動的現象(只有一系列流程完成後才會移動)

王林
發布: 2024-08-16 11:27:35
原創
489 人瀏覽過

[Javascript] Avoid the phenomenon where the ProgressBar does not move (it only moves after a series of processes are completed)

當您在 html 中建立需要長時間處理的 javascript 時,您是否曾經實現過 ProgressBar,並且遇到只有在整個過程完成後才移動 ProgressBar 的問題?

在本文中,我想介紹一個針對這種情況的臨時修復範例。

如果您按照以下步驟操作,進度條將在處理過程中運作。


第 1 步:將整個過程放在非同步方法中

首先,將整個過程放在一個非同步方法中並執行它。

async function MyFunction(ctx, canvas) {

}

MyFunction(ctx, canvas); // Be sure to run it in the original location.
登入後複製

第2步:更改ProgressBar的值後寫出睡眠

接下來,更改 ProgressBar 的值後寫入以下內容。

const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))
await sleep(0);
登入後複製

這將導致進度條在過程中發生變化。


我們介紹了一個臨時解決方案的範例,以使ProgressBar功能正常。

我希望這篇文章能幫助您至少解決一個難題。

感謝您的閱讀。

以上是[Javascript]避免ProgressBar不移動的現象(只有一系列流程完成後才會移動)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!