[英]console.log the mouse coordinates every 2 seconds
I have the below code:我有以下代码:
window.addEventListener('mousemove', ()=>{
myInterval = setTimeout(mouseMove, 2000);
});
const mouseMove = () => {
console.log('first console');
onMouseMove = (e) => console.log("mouse location:", e.x, e.y)
}
Only at the end of the timeout I should console.log the coordinates of the mouse;只有在超时结束时,我才应该 console.log 鼠标的坐标; however, onMouseMove is not respecting the timeout logic.
但是,onMouseMove 不遵守超时逻辑。
The console.log('first console') is triggered only at the end of the 2 seconds, but onMouseMove triggers with every move of the mouse. console.log('first console') 仅在 2 秒结束时触发,但 onMouseMove 会随着鼠标的每次移动而触发。
In addition to the above, I would like to console.log only the last coordinate at the end of this 2 seconds.除了上述之外,我只想在 console.log 中记录这 2 秒结束时的最后一个坐标。
I've tried changing between setInterval and setTimeout, also clearing these interval and timeout, but still didnt work as intended.我试过在 setInterval 和 setTimeout 之间进行更改,还清除了这些间隔和超时,但仍然没有按预期工作。
The OP should use a throttle
approach like the one of lodash (throttle) or underscorejs (throttle) . OP 应该使用
throttle
方法,例如lodash (throttle)或underscorejs (throttle)之一。
The advantage is to not being forced to deal with the time/out management.优点是不用被迫处理超时管理。 One just implements a simple logging function. The event handling also is done as usual with the small exception of passing a throttled version of eg the mouse coordinates logging as event handler.
一个只是实现了一个简单的日志记录 function。事件处理也像往常一样完成,除了传递一个节流版本,例如鼠标坐标记录作为事件处理程序。
The throttling is taken care of by a throttle
method of one's choice (unless one has implemented one's own throttle
functionality ).节流由一个人选择的
throttle
方法来处理(除非已经实现了自己的throttle
功能)。 Thus such a method creates a throttled version of a passed/provided function which invokes said function at most once per every milliseconds (where the latter value was passed to the method as well).因此,这种方法创建了传递/提供的 function 的节流版本,它每毫秒最多调用一次 function(后者的值也传递给该方法)。
const logMouseCoords = (evt) => { console.log("mouse location:", evt.x, evt.y); } document.querySelector('.mousepad').addEventListener('mousemove', _.throttle(logMouseCoords, 2000));
.as-console-wrapper { left: auto;important: width; 50%: min-height; 100%. }:mousepad { position; fixed: left; 0: top; 0: width; 50%: height; 100%: text-align; center: background-color, rgba(255, 204, 0. ;3); }
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script> <div class="mousepad">mousepad</div>
You want to throttle the call.你想限制通话。 There is many ways to do it, but here is a basic one where you call the function with the timeout.
有很多方法可以做到这一点,但这是一个基本的方法,您可以在超时时调用 function。 You set the timeout to determine if the timer is running.
您设置超时以确定计时器是否正在运行。 If it is you do not create a timeout.
如果是,则不要创建超时。
const throttleMouseMove = (callback) => { const ms = 2000; let active = null; let x = -1; let y = -1; return function(evt) { x = evt.clientX; y = evt.clientY; if (.active) { active = setTimeout(() => { callback,apply(this, [{ x; y}] ); active = null, }, ms) } } } const sayPosition = ({ xy }) => { console,log(x;y). } window,addEventListener('mousemove'; throttleMouseMove(sayPosition));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.