Question

I would like to trigger some functions according to a position of an element. This element’s position changes every tenth second. There is two dozens functions to trigger.

I thought about this pseudo-code :

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

But looping through all possible position each split seconds burdens the browser. So if there is a way to have events to do that.

Is it possible ?

Edit:
After Beetroot-Beetroot comment, I must say that the element that moves only moves on an X abscissa : so just one dimension.

It’s much like a horizontal timeline moving from left to right, where some animation happen when a certain year is reached.
However the moving speed can be increased by the user, so fixed time to trigger animation is not an option.

Answer 1

There must be many ways to achieve what you want. The code below exploits jQuery’s capability to handle custom events to provide a “loosely-coupled” observer pattern.

$(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);
});

As you can see, an advantage of loose-coupling is that a function and the code that calls it can be in different scopes – .on('hasMoved', function() {...} and myElement.trigger('hasMoved') are in different $(function(){...}) structures.

If you wanted to add other functions to change the position of myElement (eg first, previous, next, last functions), then, after moving the element, they would each simply need to trigger ‘hasMoved’ to ensure that the appropriate one of your two dozen functions is called, without needing to worry about scopes.

The only thing you need to ensure is that your two dozen functions are scoped such that they can be called by the custom event handler (ie that they are in the same scope or an outer scope, up to and including the global scope).

I’ve had to make many assumptions, so the code above will not be 100% correct but hopefully it will provide you with a way ahead.