每隔几毫秒在给定的xy坐标上显示元素

Question

I have a function that, recieves xy coordinates from another client in my SignalR hub. whenever clientA moves his mouse, his xy-coordinate is sent to ClientB .

I am trying to print a simple @ in the screen of clientB at that xy coordinate. This works, but the only problem is that it is super slow (I think because the function gets called for every time the mouse moves 1px ). When i move my mouse on clientA for a few seconds, the printed "@" on clientB 's screen is falling behind.

Has this anything to do with the code i wrote to display this @ ?

hub.client.MouseMoved = function (x, y, id) {
        id = "@"; //for testing purposes
        var e = document.getElementById(id);
        
        if (!e) { //if e is not found, create e
            e = $('<div id="' + id + '">' + id + '</div>');
            e.css('position', 'absolute');
            console.dir(e);
            $(e).appendTo(document.body);
        }
        else {
            e = $(e);
        }
            e.css({ left: x + "px", top: y + "px" }); //set position of cursor to x y coordinate.
        }
    }

Answer 1

To prevent low performance, you can use a timer :

var timer;

function executeMouseMoved(x, y, id){
    id = "@"; //for testing purposes
    var e = document.getElementById(id);
        
    if (!e) { //if e is not found, create e
        e = $('<div id="' + id + '">' + id + '</div>');
        e.css('position', 'absolute');
        console.dir(e);
        $(e).appendTo(document.body);
    }
    else {
        e = $(e);
    }
    e.css({ left: x + "px", top: y + "px" }); //set position of cursor to x y coordinate.
}

hub.client.MouseMoved = function (x, y, id) {
    clearInterval(timer);
    timer = setTimeout(function(){executeMouseMoved(x,y,id);}, 50); //50ms
}

Hope it helps.

JsFiddle