0

我想根据元素的位置触发一些功能。该元素的位置每十秒更改一次。有两个几十个功能可以触发。

我想到了这个伪代码：

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 横坐标上移动：所以只有一维。

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

4

1 回答 1

2

必须有很多方法来实现你想要的。下面的代码利用 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% 正确的，但希望它能为您提供前进的道路。

于 2012-09-10T11:36:56.260 回答