Question

我想根据元素的位置触发一些函数。该元素的位置每十分钟变化一次。触发有两十个功能。

我想到了这个伪代码：

When element position changes{
  Loop through all the coordinates to see if a function can be triggered{
     if the current element position matches the function's triggering position 
         execute the function
     }
}

但循环遍历所有可能的位置，每次分秒都会给浏览器带来负担。所以如果有办法让事件做到这一点。

有可能吗？

编辑：在Beetroot-Beetroot评论之后，我必须说移动的元素只在X横坐标上移动：所以只有一个维度。

这很像一个从左到右移动的水平时间轴，某些动画在某一年到达时会发生。然而，用户可以增加移动速度，因此触发动画的固定时间不是一种选择。

Answer 1

必须有很多方法可以达到你想要的效果。下面的代码利用了jQuery处理自定义事件的能力，以提供“松散耦合”的观察者模式。

$(function() {

    //Establish the two dozen functions that will be called.
    var functionList = [
        function() {...},
        function() {...},
        function() {...},
        ...
    ];

    var gridParams = {offset:10, pitch:65};//Example grid parameters. Adjust as necessary.

    //Establish a custom event and its handler.
    var $myElement = $("#myID").data('lastIndex', -1).on('hasMoved', function() {
        $element = $(this);
        var pos = $element.position();//Position of the moved element relative to its offset parent.
        var index = Math.floor((pos.left - gridParams.offset) / gridParams.pitch);//Example algorithm for converting pos.left to grid index.
        if(index !== $element.data('lastIndex')) {//Has latest movement align the element with the next grid cell?
            functionList[index](index, $element);//Call the selected function.
            $element.data('lastIndex', index);//Remember index so it can be tested mext time.
        }
    });
});

$(function() {
    //(Existing) function that moves the element must trigger the custom 'hasMoved' event after the postition has been changed.
    function moveElement() {
        ...
        ...
        ...
        myElement.trigger('hasMoved');//loosely coupled 'hasMoved' functionality.
    }

    var movementInterval = setInterval(moveElement, 100);
});

正如您所看到的，松耦合的一个优点是函数和调用它的代码可以在不同的范围内 - .on('hasMoved', function() {...}和myElement.trigger('hasMoved')处于不同的$(function(){...})结构中。

如果你想添加其他函数来改变myElement的位置（例如，第一个，上一个，下一个，最后一个函数），那么在移动元素之后，每个函数都需要触发'hasMoved'来确保调用二十几个函数中适当的一个，而不必担心范围。

您唯一需要确保的是，您的二十几个函数的作用域可以由自定义事件处理程序调用（即它们位于相同的作用域或外部作用域中，直到并包括全局作用域））。

我不得不做出很多假设，所以上面的代码不会100％正确，但希望它能为你提供一条前进的道路。

当元素到达屏幕上的某个位置时触发事件

1 个答案: