Проблемы с использованием SetTimeout

0

Я создаю игру и использую Javascript SetTimeout. Я хочу отслеживать время между каждым движением мыши, и для этого я использую SetTimeout. Проблема в том, что SetTimeout ВСЕГДА вызывается каждые x секунд (например, SetInterval). Я некоторое время смотрел на этот код и, может быть, я неправильно понял, что делает SetTimeout?

Повторяю, моя цель - измерить время между каждым "стоком" мыши и, как представляется, SetTimeout вызывается КАЖДОЕ x миллисекунды вместо одного раза. Пожалуйста, ознакомьтесь с приведенным ниже кодом для получения дополнительной информации.

Опять же, я хотел бы определить "удар" мыши с помощью SetTimeout. После "штриха" мыши (например, рисования линии) происходит пауза (в этом случае я определил это как 25 миллисекунд).

<html>
<head>
<title> My Game </title>
<script type="text/javascript">
timeout = null;
document.onmousemove = function(e) {
    var event = e || window.event;
    mouseX = event.clientX;
    mouseY = event.clientY;
    console.log(mouseX+","+mouseY);
    clearTimeout(timeout);
    timeout = window.setTimeout(
        function(){alert("New Mouse Movement")
        },25);
}
</script>
</head>

<body>
</body>
</html>
  • 3
    setTimeout() используется для постановки в очередь функции, которая будет выполняться после указанной задержки. Он не предназначен для измерения времени между двумя событиями. Один вызов setTimeout() приведет к тому, что указанная вами функция будет выполняться только один раз, а не несколько раз каждые x миллисекунд, но ваш код вызывает setTimeout() при каждом событии mousemove. Проверьте вашу консоль - вы увидите, что ваш console.log() происходит один раз за время ожидания ...
  • 1
    Единственное, что вы можете сделать, это записать дату в переменную num onmousemove, если переменная равна нулю, если нет, то игнорируйте ее. Затем установите время ожидания на 25, и если в течение 0,025 секунд движения не будет, считайте, что мышь остановлена, а затем вычтите теперь из конца.
Показать ещё 2 комментария
Теги:

2 ответа

1
Лучший ответ

Основываясь на моем комментарии, просто введите нулевое время. Затем, когда мышь перемещается, она устанавливает время начала и устанавливает таймер на 0,025 секунды. Если мышь продолжает двигаться, тогда она очистит таймаут и снова запустит таймер. Если мышь перестает двигаться, функция таймаута срабатывает и запишет время, потраченное на перемещение.

timeout = null;
mouseStart=null;
document.onmousemove = function(e) {
    var event = e || window.event;
    if(mouseStart===null){
        mouseStart=new Date();
    }
    mouseX = event.clientX;
    mouseY = event.clientY;
    console.log(mouseX+","+mouseY);
    clearTimeout(timeout);
    timeout = window.setTimeout(
        function(){
            console.log((new Date()).getTime()-mouseStart.getTime())
            mouseStart=null;
        },25);
}

Fiddle, переместите мышь по кругу, и как только вы остановитесь, вы получите прошедшее время движения мыши в миллисекундах (+25 миллисекунды): http://jsfiddle.net/rr4g2/

ПРИМЕЧАНИЕ. 25 миллисекунд - это хелла быстро. Вы можете захотеть что-то вроде 300 миллисекунд, чтобы сделать немного более понятным, что мышь перестала двигаться.

Поделиться
  • 0
    Спасибо Тим, это отличный ответ.
  • 1
    Вы, вероятно, можете выяснить остальное, чтобы нарисовать штрих между началом и окончанием :)
0

Вы alert о новом движении мыши 25 мс после того, как это произойдет, а не о том, как долго пробел между ними. setTimeout - это не то, что вам нужно.

Вместо этого, на каждом движении мыши сохраняйте текущее время и вычитайте из него предыдущее время, затем alert этом.

Изменение: я mousemove alert для console.log так как mousemove будет работать так часто.

var oldTime = Date.now();
document.onmousemove = function (e) {
    var event = e || window.event;
    mouseX = event.clientX;
    mouseY = event.clientY;
    console.log(mouseX+","+mouseY);
    // Get the current time.
    var newTime = Date.now();
    // Alert the difference.
    console.log('Time between mouse strokes: ' + (newTime - oldTime) + 'ms');
    // Save the current time for the next movement.
    oldTime = newTime;
};
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню