2 回答

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);
}
})

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));
添加回答
舉報