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

我想根据元素的位置触发一些函数。该元素的位置每十秒钟改变一次。有二十个函数需要触发

我想到了这个伪代码：

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
     }
}

但是，每过一秒，浏览所有可能的位置都会给浏览器带来负担。因此，如果有一种方法可以让事件做到这一点

可能吗

编辑： 在beetrootbeetrootcomment之后，我必须说，移动的元素只在X横坐标上移动：所以只有一维

这很像一个从左到右移动的水平时间线，当达到某一年时会发生一些动画。

---

但是，移动速度可以由用户提高，因此触发动画的固定时间不是一个选项。

必须有许多方法来实现您想要的。下面的代码利用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（'hasmove'，function（）{…}

和

myElement.trigger（'hasmove'）

处于不同的

$（function（）{…}）

结构中

如果您想添加其他函数来更改

myElement

的位置（例如，first、previous、next、last函数），那么在移动元素后，它们只需触发“hasmove”，以确保调用您的24个函数中的适当一个，而无需担心作用域

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

---

我已经做了很多假设，所以上面的代码不是100%正确，但希望它能为您提供前进的道路。

您能描述一下位置矩阵的性质吗？例如，它是正则直线（“笛卡尔”）、随机直线（“蒙德里安”）、同心环（“圆形”）、正则极轴（“丰塔纳”），半规则极坐标（“dartboard”），“lobal polar”（“Dhalia”）？在JavaScript和web的总体环境中，我们通常谈论的是笛卡尔坐标（虽然不是必需的，尤其是在游戏中）是的，这是所有定位的起点，但是一个典型的屏幕有50万像素的网页，你说只有24个函数可以触发。因此，必须有某种像素到函数的映射。如果不知道这种映射，你的问题可能会n只能用最笼统的术语来回答，不会有什么特别的帮助。谢谢–甜菜根甜菜根。在你的评论后进行了修改。谢谢你详细的回答！