console.log 每 2 秒記錄一次鼠標坐標

Question

我有以下代碼：

window.addEventListener('mousemove', ()=>{
   myInterval = setTimeout(mouseMove, 2000);
});

const mouseMove = () => {
    console.log('first console');
    onMouseMove = (e) => console.log("mouse location:", e.x, e.y)
}

只有在超時結束時，我才應該 console.log 鼠標的坐標； 但是，onMouseMove 不遵守超時邏輯。

console.log('first console') 僅在 2 秒結束時觸發，但 onMouseMove 會隨着鼠標的每次移動而觸發。

除了上述之外，我只想在 console.log 中記錄這 2 秒結束時的最后一個坐標。

我試過在 setInterval 和 setTimeout 之間進行更改，還清除了這些間隔和超時，但仍然沒有按預期工作。

Answer 1

OP 應該使用throttle方法，例如lodash (throttle)或underscorejs (throttle)之一。

優點是不用被迫處理超時管理。 一個只是實現了一個簡單的日志記錄 function。事件處理也像往常一樣完成，除了傳遞一個節流版本，例如鼠標坐標記錄作為事件處理程序。

節流由一個人選擇的throttle方法來處理（除非已經實現了自己的throttle功能）。 因此，這種方法創建了傳遞/提供的 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>

Answer 2

你想限制通話。 有很多方法可以做到這一點，但這是一個基本的方法，您可以在超時時調用 function。 您設置超時以確定計時器是否正在運行。 如果是，則不要創建超時。

 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));