Показать элемент на заданной координате x-y каждые несколько мс

Question

У меня есть функция, которая получает xy координаты от другого клиента в моем концентраторе SignalR. когда clientA перемещает мышь, его xy-coordinate выслан на ClientB.

Я пытаюсь напечатать простой @ на экране clientB при этом x-y координаты. Это работает, но единственная проблема заключается в том, что она очень медленная (я думаю, потому что функция вызывается для каждого момента перемещения мыши 1px). Когда я перемещаю мышь на clientA на несколько секунд, отпечатанный «@» на экране clientB отстает.

Имеет ли это какое-либо отношение к коду, который я написал для отображения этого @?

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

Для предотвращения низкого уровня производительности, вы можете использовать таймер:

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 
} 

Надеется, что это помогает.

JsFiddle