Saya mencoba menambahkan progressbar tetapi kadang-kadang bug dan mengisi terlalu lambat atau terlalu cepat, sebagian besar waktu berfungsi dengan baik.

Saya juga berpikir bahwa harus ada cara yang lebih baik untuk memprogram ini karena saya melakukan banyak perhitungan untuk satu progressbar saya pikir.

Ini Kode saya:

Ts:

startProgressbar(timeToWait: number) {
this.progress = 0;
const interval = setInterval(() => {
  let addvalue = (1 / timeToWait * 100) / 64;
  this.progress += addvalue;
  if (this.progress >= 100) {
    this.progress = 100;
    window.clearInterval(interval);
  }
}, 15.625); }

Fungsi akan dipanggil lagi segera setelah selesai karena akan ada slide berikutnya dari slideshow langsung setelahnya.

Nilai kemajuan menyerupai lebar bilah kemajuan, selalu berupa persentase.

Dari mana angka 15.625 berasal? Ini hanya sepersekian detik sehingga bilah kemajuan diperbarui 64 kali per detik memberikan ilusi bergerak dengan lancar.

Html saya cukup mendasar:

<div class="progressbar" [ngStyle]="{'width': progress+'%'}"></div>

Saya harap Anda memiliki pendekatan yang lebih baik daripada saya. Terima kasih sebelumnya

[EDIT]: Yang saya maksud dengan bugging adalah bahwa progressbar terkadang mulai terisi terlambat dan karenanya tidak mencapai akhir (100%) sebelum slide berikutnya muncul dan kemudian waktu berikutnya juga diimbangi. Terkadang dimulai lebih awal dan kemudian mencapai akhir (100%) terlalu cepat sehingga tetap 100% untuk beberapa saat hingga slide berikutnya muncul.

3
niehoelzz 9 Januari 2020, 12:39

2 jawaban

Jawaban Terbaik

Mengapa tidak menggunakan timer Rxjs?

interval(timeToWait):Observable<number>
  {
    let progress = 0;
    return timer(0, timeToWait)
      .pipe(
        takeWhile(() => progress <= 100),
        map(()=>progress<100?progress:100),
        tap(() => (progress += 10))
      )
  }

Menggunakan

   this.interval(200).subscribe((res) => {
        console.log(res);
      });

Perbarui tambahkan stackblitz: stackblitz

Perbarui 2 berkat @Ritaj, timer mengembalikan aliran (0,1,2,3,4,...), jadi kita bisa menggunakan sederhana

 return timer(0, timeToWait)
  .pipe(
    map((progress)=>progress*5<100?progress*5:100),
    takeWhile((progress) => progress <= 100)
  )

Perbarui 3 berkat jawaban SO ini, kita bisa memasukkan nilai terakhir saat kita menggunakan takeWhile, jadi, jika timeToWait penting, kita bisa mengganti interval fungsi dengan

 interval(timeToWait) {
    const initial = new Date().getTime();
    return timer(0, 200).pipe(
      map(()=> new Date().getTime()),
      takeWhile((res) => res<=initial+timeToWait,true),
      map(now=>{
        const porc = (100 * (now - initial)) / timeToWait;
        return porc<100?Math.round(porc):100
      })
    );
4
Eliseo 10 Januari 2020, 08:00

Saya sarankan mengikuti praktik terbaik Javascript untuk menunggu. Berikut adalah stackblitz yang saya siapkan dengan kode contoh untuk bilah kemajuan yang menggunakan praktik yang direkomendasikan .

export class AppComponent  {
  name = 'Angular';
  public progress = 0;
  public timeToWait: number = 1;

  private default_ms = 8.33; // 120 times a second.
  private sleep(ms: number): Promise<void> {
    return new Promise(resolve => setTimeout(resolve, ms));
  }

  public async startProgressBar(): Promise<void> {
    this.progress = 0;
    while(this.progress <= 100) {
      this.progress += (1 / this.timeToWait);
      await this.sleep(this.default_ms);
    }
  }
}

Saya tidak bisa mengatakan dengan pasti mengapa solusi Anda "mengganggu". Memanggil window.clearInterval di dalam fungsi interval sepertinya praktik yang buruk, tapi saya tidak yakin. Beri tahu saya jika solusi ini cocok untuk Anda.

1
igg 9 Januari 2020, 10:13