东莞好的网站建设公司,免费自学网,前端开发语言,宣传片公司哪家好TaskPool方法不会阻塞UI#xff0c;如果做上传图片的功能加载Loading记得使用TaskPool#xff0c;Promise、Async/Await都会阻塞UI 【引言】
发现Promise可能会阻塞UI#xff0c;尝试使用async或await#xff0c;但发现它们仍然会导致阻塞。后来看到chaoxiaoshu回复的Tas…TaskPool方法不会阻塞UI如果做上传图片的功能加载Loading记得使用TaskPoolPromise、Async/Await都会阻塞UI 【引言】
发现Promise可能会阻塞UI尝试使用async或await但发现它们仍然会导致阻塞。后来看到chaoxiaoshu回复的TaskPool方法发现使用该方法后UI不再阻塞。因此我特意编写了一个加载弹窗进行测试结果同样显示只有TaskPool方法不会阻塞UI。
【代码示例】
import { taskpool } from kit.ArkTS;Component
export struct MyDialog_1 {Prop dialogID: stringState title: string 加载中...build() {Stack() {Column() {LoadingProgress().color(Color.White).width(100).height(100)Text(this.title).fontSize(18).fontColor(0xffffff).margin({ top: 8 }).visibility(this.title ? Visibility.Visible : Visibility.None)}}.onClick(() {getContext(this).eventHub.emit(this.dialogID, 关闭弹窗)}).width(180).height(180).backgroundColor(0x88000000).borderRadius(10).shadow({radius: 10,color: Color.Gray,offsetX: 3,offsetY: 3})}
}Entry
Component
struct Page28 {State time3: string State isShowLoading: boolean falsebuild() {Stack() {Column({ space: 20 }) {Button(【方案一】测试Promise).type(ButtonType.Capsule).onClick(() {this.isShowLoading truethis.time3 loading...console.log(start call promise)testPromise(100000000).then((time) {this.time3 耗时${time}console.log(promise then)this.isShowLoading false})console.log(end call promise)})Button(【方案二】测试async await).type(ButtonType.Capsule).onClick(() {this.isShowLoading truethis.time3 loading...console.log(start call promise)this.testPromise()console.log(end call promise)})Button(【方案三】测试taskpool).type(ButtonType.Capsule).onClick(() {this.isShowLoading truethis.time3 loading...let task: taskpool.Task new taskpool.Task(concurrentFunc, 100000000);taskpool.execute(task);task.onReceiveData((time: number) {this.time3 耗时${time};console.log(end)this.isShowLoading false})})Text(this.time3)}.alignItems(HorizontalAlign.Start)MyDialog_1().visibility(this.isShowLoading ? Visibility.Visible : Visibility.None)}.width(100%).height(100%)}//耗时操作async testPromise() {let time await testPromise(100000000)time new Date().getTime() - timethis.time3 耗时${time}毫秒console.log(promise then)this.isShowLoading false}
}function testPromise(count: number): Promisenumber {return new Promisenumber((resolve) {let time Date.now().valueOf()let num 0for (let i 0; i count; i) {num}time Date.now().valueOf() - timeresolve(time)})
}Concurrent
function concurrentFunc(count: number): void {let time Date.now().valueOf()let num 0for (let i 0; i count; i) {num}time Date.now().valueOf() - timetaskpool.Task.sendData(time);
}
【方案一Promise】
优点
易于理解Promise的语法简单易于理解和使用。
链式调用可以通过.then进行链式调用处理多个异步操作。
缺点
阻塞UI在执行耗时任务时Promise会阻塞UI线程导致Loading弹窗不能及时显示。
【方案二Async/Await】
优点
同步写法Async/Await 使异步代码看起来像同步代码更加直观。
错误处理可以使用try/catch块处理错误使代码更加清晰。
缺点
阻塞UI与Promise类似Async/Await在执行耗时任务时仍会阻塞UI线程导致Loading弹窗不能及时显示。
【方案三TaskPool】
优点
真正的异步TaskPool可以将耗时任务放到独立的线程中执行不会阻塞UI线程保证了UI的流畅性。
数据通信通过task.onReceiveData可以方便地接收任务结果。
缺点
复杂度增加引入了多线程处理增加了代码的复杂度和维护成本。
【使用注意事项】
任务复杂度
如果任务较为简单且不会长时间阻塞UI可以考虑使用Promise或Async/Await。
如果任务较为复杂且耗时较长建议使用TaskPool以保证UI的流畅性例如上传图片时显示加载中。
代码可读性
Promise和Async/Await的语法较为简单适合初学者使用。
TaskPool需要对多线程有一定了解适合有经验的开发者。
性能考虑
TaskPool在处理大量或耗时任务时表现更优可以显著提升应用性能。
Promise和Async/Await在小任务场景下更简洁高效。
【总结】
选择合适的异步操作方案至关重要。Promise和Async/Await适合处理简单的异步任务而TaskPool则在处理复杂耗时任务时表现出色。根据实际需求选择最适合的方案能有效提升开发效率和用户体验。希望本文对您在异步操作的选择和使用上有所帮助。
