第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

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

使用可觀察量為順序動畫制作可取消的 setTimeouts

使用可觀察量為順序動畫制作可取消的 setTimeouts

慕絲7291255 2023-07-29 15:03:06
我有一個對象數(shù)組,根據(jù)對象的類型鍵代表不同的動畫。我使用setTimeout. 我正在反應(yīng)組件的函數(shù)內(nèi)運行下面的代碼。animations.forEach((animation, index) => {      switch (animation.type) {        case "animation-type": {          setTimeout(() => {            //change the style of some elements          }, index * 1000);          break;        }        ...        default:          break;      }});上面的整個過程按預(yù)期正常運行,只是一旦開始我就無法停止。我希望能夠出于某種原因在某個時刻停止該過程,并取消等待輪到的剩余動畫。我正在尋找一種簡單的方法來以聲明方式執(zhí)行此操作,我能想到的唯一選擇是使用 rxjs 中的可觀察量來使該過程可取消。然而,我很難調(diào)整上面的過程來使用可觀察量,因為我對 rxjs 還很陌生。長話短說,我想讓這個過程可以取消。
查看完整描述

2 回答

?
MMMHUHU

TA貢獻1834條經(jīng)驗 獲得超8個贊

下面的流zip創(chuàng)建每 1000 毫秒向訂閱的 lambda 發(fā)送一個對象。一旦不再有任何對象,它就會結(jié)束。


takeUntil是可用于控制流何時結(jié)束的更通用的運算符之一。在這種情況下,當(dāng)cancel$發(fā)出一個值時,整個流就結(jié)束了。


const cancel$ = new Subject();

zip(

  from(animations), 

  interval(1000)

).pipe(

  takeUntil(cancel$),

  map(([x,y]) => x)

).subscribe(animation => {

  switch (animation.type) {

    case "animation-type": {

      //change the style of some elements

      ...

    default:

      break;

  }

});

然后,如果您需要停止它,您可以運行此行


cancel$.next();

當(dāng)然,您可以傳入一個觀察者對象,而不是使用 lambda 函數(shù)進行訂閱。


).subscribe({

  next: animation => {

    switch (animation.type) {

      case "animation-type": {

        //change the style of some elements

        ...

      default:

        break;

    }

  },

  complete: () => {

    // Final touches/ reset the animation/ whatever

  },

  error: err => {

    console.log("Got an error: " + err.message);

    throw(err);

  }

})


查看完整回答
反對 回復(fù) 2023-07-29
?
梵蒂岡之花

TA貢獻1900條經(jīng)驗 獲得超5個贊

您可以存儲超時函數(shù):



    const timeouts = [];


    animations.forEach((animation, index) => {

          switch (animation.type) {

    

            case "animation-type": {

    

              timeouts[index] = setTimeout(() => {

                //change the style of some elements

              }, index * 1000);

    

              break;

            }

    

            ...

    

            default:

              break;

          }

    });


然后:


timeouts.map(timer=> clearTimeout(timer));

如果您正在使用 React 項目,則可以使用useRef鉤子


    const timeouts = useRef([]);



    animations.forEach((animation, index) => {

          switch (animation.type) {

    

            case "animation-type": {

    

              timeouts.current[index] = setTimeout(() => {

                //change the style of some elements

              }, index * 1000);

    

              break;

            }

    

            ...

    

            default:

              break;

          }

    });

并清除超時:


timeouts.current.map(timer=> clearTimeout(timer));


查看完整回答
反對 回復(fù) 2023-07-29
  • 2 回答
  • 0 關(guān)注
  • 173 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號