[英]Show Element on given x-y coordinate every few ms
我有一个函数,从我的SignalR
集线器中的另一个客户端SignalR
xy
坐标。 每当clientA
移动他的鼠标时,他的xy-coordinate
就会被发送到ClientB
。
我试图在xy
坐标的clientB
屏幕上打印一个简单的@
。 这是有效的,但唯一的问题是它超级慢(我认为因为每次鼠标移动1px
时都会调用该函数)。 当我在clientA
上移动鼠标几秒钟时, clientB
屏幕上打印的“@” 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.
}
}
为防止性能下降,您可以使用计时器:
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
}
希望能帮助到你。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.