Javascript 每隔几毫秒在给定的x-y坐标上显示元素

我有一个函数，从我的

信号器
集线器中的另一个客户端接收
xy
坐标。每当
clientA
移动鼠标时，其
xy坐标
将发送到
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.
        }
    }

hub.client.MouseMoved=函数（x，y，id）{
        id=“@”//用于测试目的
        var e=document.getElementById（id）；
        
        如果（！e）{//如果未找到e，则创建e
            e=$（''+id+''）；
            e、 css（‘位置’、‘绝对’）；
            署长（e）；
            $（e） .附录（文件正文）；
        }
        否则{
            e=$（e）；
        }
            e、 css（{left:x+“px”，top:y+“px”}）；//将光标的位置设置为xy坐标。
        }
    }
为了防止性能低下，您可以使用计时器：

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
}

var定时器；
函数executeMouseMoved（x，y，id）{
id=“@”//用于测试目的
    var e=document.getElementById（id）；
        
    如果（！e）{//如果未找到e，则创建e
        e=$（''+id+''）；
        e、 css（‘位置’、‘绝对’）；
        署长（e）；
        $（e） .附录（文件正文）；
    }
    否则{
        e=$（e）；
    }
    e、 css（{left:x+“px”，top:y+“px”}）；//将光标的位置设置为xy坐标。
}
hub.client.MouseMoved=函数（x，y，id）{
清除间隔（计时器）；
timer=setTimeout（函数（）{executeMouseMoved（x，y，id）；}，50）；//50ms
}

希望能有帮助

使用setInterval进行此操作。我试图围绕此函数设置setInterval。但它似乎没有对此做出反应。我认为这是可行的。但它似乎同样缓慢。因此我将间隔从50更改为1000。但它仍然每次执行函数，而不是每1000毫秒执行一次。您声明“计时器”然后你清除了计时器的间隔。你不需要对计时器执行其他操作吗？是的，很抱歉，我刚刚忘记了设置计时器：）。我已经更新了代码。但是即使我实例化了它，它也不会每秒触发。如果你让50毫秒，executeMouseMoved方法将在最后一个鼠标移动像素50毫秒后执行被触发，而不是每次鼠标移动1个像素时触发，但它不会这样做。它仍然会触发每个移动的像素。即使我将间隔设置回50毫秒