javascript - 执行函数的同时监听变化的值

Question

我正在使用 iosSlider 在这里显示艺术作品:http://artiris.clients.twi.tl/galeries/galerie-bleue

我希望为中心之外的作品添加模糊滤镜。尽管该插件没有“事件”类设置，但我可以轻松添加一个具有简单功能的类设置来执行此操作。

这是棘手的部分。我想要模糊过渡进出。不是时间值，而是我希望将过渡与 slider 移动相关联。例如，当艺术品接近中心时，模糊值将与运动相关，并且当艺术品位于中心时模糊值将为 0。我想要这个，因为 slider 支持触摸。

slider 对象确实提供了它的实时位置，因此我可以确定要设置的模糊值。然而，为此编写一个 do/while 循环，浏览器就会崩溃。还有 onSlideStart 和 onSlideComplete 事件，但我无法理解如何在一个事件上执行函数并在另一个事件上停止它。

总而言之，我只需要有人引导我朝着正确的方向前进，了解如何干净有效地完成这件事。

谢谢

Answer 1

除非您不断发生某种“onDrag”事件，否则我只能想到两种方法来处理此问题。

First:每毫秒左右进行一次setTimeout，用于调整模糊。几乎可以肯定这不是一个好的选择，但从技术上讲它是一个的选择。这可能会导致性能问题，尤其是在低速设备上。这也意味着模糊可能会不稳定，因为超时可能不会真正每毫秒运行一次。

您不能使用循环并根据事件启用/禁用循环，正如您在评论中建议的那样，因为 javascript 是单线程的:一旦循环开始，就不会运行其他 javascript，并且你将永远锁定你的浏览器。

第二:纯 CSS 解决方案。如果移动仅是 CSS，那么运气好的话，可以用相同的方式完成模糊。遗憾的是我不是 CSS 专家，所以我不确定执行此操作的最佳方法。

抱歉，这不是您问题的一个很好的答案，但我想向您解释 javascript 选项，以及您可能不应该这样做的原因。