Question

我有一个分配数据的模拟数组。一个组件使用此数据来显示案例列表。每个案例都有分配的图像。当悬停一个案例时，只会显示这些图像，但一次只能显示一个图像-每隔300ms图像就会更改一次。

我的代码可以运行，但是我在使用Safari时遇到了麻烦-图像不会更改。。以某种方式，Safari无法处理它。将间隔从300m增加到3000ms使其起作用，但这不是我希望它起作用的方式。

查看safari中的代码，可以证明图像实际上每300毫秒切换一次，因为img源发生了变化-但更改不会显示。

顺便说一句，我在Chrome上尝试了一下，效果很好。

foo.xsh

source foo.xsh

Answer 1

在我的评论之后，您应该使用可观察的东西。

它们在Angular中大量使用，您可以依靠它进行更改检测。

这是没有Angular的可观察对象的简单示例。只需将其调整为适合您的代码（并询问是否存在问题），即可使Angular处理图片更改。

Sandbox

import { fromEvent, Subscription, timer } from "rxjs";
import {} from "rxjs/operators";

const container = document.querySelector(".container");

let subscription: Subscription;

let count = 0;

const cycler = timer(0, 500);

fromEvent(container, "mouseenter").subscribe(() => {
  subscription = cycler.subscribe(() => {
    count++;
    container.textContent = count;
  });
});

fromEvent(container, "mouseleave").subscribe(() => {
  subscription && subscription.unsubscribe();
  container.textContent = "";
  count = 0;
});

setInterval不会在Safari上更改图像，但会在Chrome上更改

1 个答案: