Как использовать setInterval с onmousemove [дубликат]

175
14 апреля 2017, 23:00

На данный вопрос уже ответили:

  • Потеря контекста вызова 3 ответа

Идея проста, узнавать координаты курсора каждые 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 миллисекунд?

Answer 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 // или что вам там конкретно нужно
}
READ ALSO
Помогите разобраться с кодом (Google Chart)

Помогите разобраться с кодом (Google Chart)

Здравствуйте! Нашел подходящий для себя график на Google Chart, не могу понять как задавать значения даты, нужно выводить числомесяц

344
Пустая страница после document.write

Пустая страница после document.write

Использую documentwrite, чтобы дописать html в страницу по нажатию на кнопку, но все существующие элементы куда-то исчезают

197
Как добиться копирования одним кликом — Clipboard?

Как добиться копирования одним кликом — Clipboard?

Никак не могу добиться копирования в буфер обмена данных из атрибута кнопки одним кликомКопирование происходит только на втором клике

223
Остаток от деления

Остаток от деления

Каким образом можно сокращать все числа например:(1220043, 12, 34325) в диапазон чисел от 1 до 4Пол дня ломаю голову и через циклы делил на 2, и через...

213