0

Нужно написать функцию, которая считает нажатия на определенную кнопку (в моем случае пробел) в течение ограниченного времени. Если пользователь нажал кнопку нужное кол-во раз функция должна сразу вернуть 1 (а не ждать пока время выйдет), если же время вышло то 0. Мой же код не ждет 10 секунд, а сразу выводит "fail"; к тому же, после выхода из функции qte, продолжает реагировать на нажатие пробела.

var count = 0;
var flag;

function qte() {
  console.log('start');
  var timerId = setTimeout(failed, 1000);
  $(document).keydown(function(key) {
    if (parseInt(key.which) === 32) {
      count++;
      console.log(count);
      if (count === 10) {
        clearTimeout(timerId);
        count = 0;
        flag = true;
        return;
      }
    }
  });
  console.log(flag);
  if (flag !== undefined)
    return;

}

function failed() {
  flag = false;
  return;
}

$(document).ready(function() {
  $('div').click(function() {
    qte();
    if (flag)
      console.log('success');
    if (flag === false)
      console.log('fail');
    return;
  });
});
div {
  height: 100px;
  width: 100px;
  border-radius: 100%;
  background-color: #ABCDEF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div></div>
</body>

2
  • 1
    $(document).keydown(function(key) { каждый раз навешивает обработчик
    – Grundy
    21 апр 2016 в 17:08
  • Как тогда можно обойти/заменить это?
    – Yarr
    21 апр 2016 в 17:51

2 ответа 2

2

1.Почему все-таки несмотря на "setTimeout(failed, 1000);" нет никакой задержки, и в консоль сразу выводится "fail"

Вам нужно прочитать про ассинхронный код. Если в кратце, то setTimeout откладывает свое выполнение а код за ним начинает выполняться и console.log выходит выполняется раньше чем Вы ожидаете.

2.Если keydown повесить только один раз, то каким образом отслеживать нажатие пробела?

Просто вешаете обработчик один раз. Он не перестает слушать событие после того как пройдет один раз по функции. Когда Вам больше не нужно слушать просто снимаете обработчик.

В вашем случае выйдет что-то вроде этого:

$(document).ready(function () {
    start();
});


var timerId = null;

function start() {
    var count = 0;

    $(document).on('keydown', function(evt) {
        if (evt.which !== 32) { // вроде как evt.witch всегда int
            return;
        }

        if (++count === 10) {
            finish(true);
        }
    }

    timerId = setTimeout(function () {
        finish();
    }, 1000 * 10); // через 10 сек
}

function finish(isWin) {
    clearTimeout(timerId);
    $(document).off('keydown');

    if (isWin) {
         alert('Поздравляю! Вы выйграли');
    } else {
         alert('Вы проиграли. Попробуйте еще раз');
    }
}
1
  • Соответственно можно на какую-то кнопку повесить обработчик start и можно будет начать заного 22 апр 2016 в 6:00
0

Каждый раз при выполнение функции qte вешается обработчик событий и их становится с каждым разом всё больше (он не заменяется, а добавляется один).
Можно каждый раз удалить предыдущий обработчик, во так:

$(document).unbind('keydown').keydown(function(key) { ...

Или вешать его один раз, а не каждый раз при вызове функции.

1
  • Спасибо за совет, но осталось еще несколько вопросов: 1.Почему все-таки несмотря на "setTimeout(failed, 1000);" нет никакой задержки, и в консоль сразу выводится "fail" 2.Если keydown повесить только один раз, то каким образом отслеживать нажатие пробела?
    – Yarr
    21 апр 2016 в 18:47

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.