Как использовать setInterval с onmousemove

Question

Идея проста, узнавать координаты курсора каждые 20 миллисекунд. Но только получается это сделать. Делал вот так. Вместо e пробовал event, window.event

setInterval(document.onmousemove = function (e) {
   var mouseX = e.pageX - getCoords(canvas).left;
   var mouseY = e.pageY - getCoords(canvas).top;
   console.log(mouseX);
   console.log(mouseY);
},20);

Подскажите, кто знает. Или может есть какой-то другой способ узнать координаты курсора каждые 20 миллисекунд?

ThisMan · Accepted Answer · 2017-04-13T12:23:13.730

1

Вы каждые 20 секунд меняете обработчик события mousemove, что совершенно не нужно.

// определим обработчик один раз
let start = Date.now()
const delay = 20 // задержка
document.onmousemove = function (e) {
    let now = Date.now()
    // прошло N миллисекунд, можно выполнять что угодно
    if(now - start > delay) {
        start = now // обязательно обновляем дату с последнего вызова
        // тут можно выполнить ваш код
    }
}

Но есть одна беда, если вы не будите двигать мышкой, то ничего происходить не будет, и возможно последние координаты не будут соответствовать координатам прямо сейчас (чем больше задержка, тем больше разница)

UPD

Вариант с актуальными координатами.

let coords = 0
setInterval(function () {
    console.log(coords) // в coords должны быть актуальные данные
}, 20)

document.onmousemove = function (e) {
   coords = e.pageX // или что вам там конкретно нужно
}

edited Apr 13 '17 at 12:23

answered Apr 13 '17 at 12:13

ThisMan

12,261

Можно параметры где-то записывать и через интервал выводить, когда не двигается :D – Yuri Apr 13 '17 at 12:15
1

Вы каждые 20 секунд меняете обработчик события mousemove - на самом деле нет. обработчик присвоится всего один раз. – Grundy Apr 13 '17 at 12:18
@Grundy, функция же анонимная, разве не будет каждый раз новая ссылка присваиваться? – ThisMan Apr 13 '17 at 12:19
Эээх.. а надо-то даже,если мышь не двигается... – Igor Apr 13 '17 at 12:20
@Igor, обновил, теперь если мышка не двигается, то просто будут одни и те же координаты показываться – ThisMan Apr 13 '17 at 12:23
1

@ThisMan, конечно нет, повторяться будет функция, которая передана первым параметром. В данном случае в первом параметре - присваивание, результат присваивания - как раз присваиваемая функция. То есть, присвоение обработчика, происходит один раз при вызове setInterval, и все – Grundy Apr 13 '17 at 12:23
@ThisMan, прекрасно! Спасибо, все работает теперь как надо! А главное просто! Почему сам не додумался?) – Igor Apr 13 '17 at 12:43

Как использовать setInterval с onmousemove

1 Answers1