Javascript 在侦听更改的值时执行函数

我正在使用iosSlider在此处显示艺术品：

我希望在中心以外的作品中添加模糊过滤器。虽然插件没有“活动”类设置，但我可以通过一个简单的函数轻松添加一个

这是棘手的部分。我想让模糊变进变出。不是使用时间值，而是希望将过渡链接到滑块运动。例如，当艺术品接近中心时，模糊值将连接到运动，当艺术品位于中心时，模糊值将为0。我想要这个，因为滑块支持触摸

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

总而言之，我只需要有人引导我朝着正确的方向前进，告诉我如何才能干净利落、高效地完成这项工作

---

谢谢

除非你经常遇到“onDrag”事件，否则我只能想两种方法来处理这个问题

First：每毫秒左右一次的

设置超时时间，用于调整模糊度。这几乎肯定不是一个好的选择，但从技术上讲是一个选择。这可能会导致性能问题，尤其是在低速设备上。这也意味着模糊可能是变化无常的，因为超时可能不会每毫秒运行一次

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

秒：仅CSS解决方案。如果运动只是CSS，那么幸运的话，模糊也可以用同样的方式完成。遗憾的是，我不是CSS专家，所以我不确定最好的方法

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

您可以在iossluder插件的touchmove事件中添加自己的函数。然后，该函数将与IOS滑块一起启动。我建议把它放在1806行之后。如果我要对它进行编码，我就会这样做。
好了，就在这里

不确定这是否是最好的方法，但似乎有效

当滑块开始移动时，我会启动一个超时，每100ms运行一个函数。滑块停止移动时，超时清除

以下是我的功能：

function adjustFilter() {
    var nodes = $gallerySlider.data('iosslider').slideNodes,
        stage = $gallerySlider.data('iosslider').stageWidth,
        matrix =    $slider.css("-webkit-transform") ||
                    $slider.css("-moz-transform") ||
                    $slider.css("-ms-transform") ||
                    $slider.css("-o-transform") ||
                    $slider.css("transform"),
        matrixArray = matrixToArray(matrix),
        position =  Math.abs(matrixArray[4]);

    for(var i = 0; i < nodes.length; i++) {
        var $node = $(nodes[i]),
            nodeMatrix =    $node.css("-webkit-transform") ||
                            $node.css("-moz-transform") ||
                            $node.css("-ms-transform") ||
                            $node.css("-o-transform") ||
                            $node.css("transform"),
            nodeMatrixArray = matrixToArray(nodeMatrix),
            nodePosition = Math.abs(nodeMatrixArray[4]),
            distance = Math.abs(Math.min(Math.max(parseInt(nodePosition-position), stage*(-1)), stage)),
            tx = distance/stage;

        $node.css({ '-webkit-filter' : 'blur('+tx*10/2+'px) grayscale('+tx+')' })
    }
}

功能调整过滤器（）{
var节点=$gallerySlider.data（'ioslider'）。slideNodes，
stage=$gallerySlider.data（'ioslider'）。stageWidth，
矩阵=$slider.css（“-webkit transform”）||
$slider.css（“-moz-transform”）||
$slider.css（“-ms transform”）||
$slider.css（“-o-transform”）||
$slider.css（“转换”），
矩阵阵列=矩阵阵列（矩阵），
position=Math.abs（matrixArray[4]）；
对于（var i=0；i

基本上它得到了滑块的位置。然后，对于每个节点，我得到它的当前位置，并计算距离中心的距离。此距离比标准化的距离大，因此它永远不会大于幻灯片的宽度。然后，我使用该数字实时设置每个节点的模糊和灰度。这样效果是连续的

到目前为止，表现似乎不错。在任何情况下，我将仅在浏览器支持filter属性时运行该函数

如果有人能建议我改进代码的方法，我洗耳恭听
 我尝试过一个do/while循环，该循环从SlideStart开始，当它不等于中间的下一张幻灯片的值时，侦听滑块的变化值，但这只会使浏览器崩溃。是的，记住浏览器不是多线程的：如果javascript中有一个while循环，就不能有一个事件“将其关闭”-事件代码将永远不会运行，因为循环将永远不会被关闭。我还认为可能只使用CSS转换来实现这一点，因为所有的移动都是CSS。