0
<script>
function fresh() {    
location.reload();    
}    
setInterval("fresh()",3000);    
</script>    

Как запретить исполнение этого кода, до тех пор пока пользователь набирает текст в textarea при этом код не должен выполняться еще 30 сек. после того, как пользователь закончит набирать текст?

0

2 ответа 2

2

Я не совсем понимаю практичность описанного Вами поведения, но если очень хочется, то можно сделать так:

<div id="hint">Осталось 3 секунды!</div>
<form>
<textarea id="content" cols="30" rows="10"></textarea>
</form>

<script src="//code.jquery.com/jquery-2.1.4.js"></script>
<script>
  $(function () {
    var refresh = function () {
      location.reload();
    }
    var element = $("#content");
    var hint = $("#hint");

    var TIMEOUT = 3000; // == 3 sec
    var timer_id = setTimeout(refresh, TIMEOUT);

    element.keyup(function () {
      timer_id && clearTimeout(timer_id);
      timer_id = setTimeout(refresh, TIMEOUT);
    });

    element.blur(function () {
      hint.show();
    });

    element.focus(function () {
      hint.hide();
    });
  });
</script>
4
  • А как установить таймер до обновления после того, как пользователь перестал печатать? 29 дек 2015 в 18:23
  • Например, я вышел с textarea и появляется: До обновления страницы осталось: 3 сек. 29 дек 2015 в 18:25
  • таймер переустанавливается на каждое событие keyup. Для отображения надписи про "осталось 3 сек", можно использовать, например, событие blur 29 дек 2015 в 18:28
  • поменял ответ для отображения надписи 29 дек 2015 в 18:37
1

Самый простой вариант:

<html>
<head>
    <script>
        function someFn() {
            alert("Прошло 30 секунд.");
        }
        var timeoutId = setTimeout(someFn, 30000);
        function restartTimer() {
            clearTimeout(timeoutId);
            timeoutId = setTimeout(someFn, 30000);
        }
    </script>
</head>
<body>
    <input type="text" onkeypress="restartTimer();" />
</body>
</html>

Вариант чуть поэлегантнее, использующий тот факт, что при неверном timeoutId функция clearTimeout ничего не делает:

<html>
<head>
    <script>
        function someFn() {
            alert("Прошло 30 секунд.");
        }
        function restartTimer() {
            clearTimeout(timeoutId);
            timeoutId = setTimeout(someFn, 30000);
        }
        var timeoutId;
        restartTimer();
    </script>
</head>
<body>
    <input type="text" onkeypress="restartTimer();" />
</body>
</html>

Но у этого подхода есть недостаток. После того, как someFn сработает, пользователь может продолжить ввод в поле и someFn после таймаута сработает повторно. Чтобы этого избежать, можно установить флаг, а можно поступить умнее, убрав у поля обработчик:

<html>
<head>
    <script>
        function someFn() {
            var element = document.getElementById("input1");
            element.onkeypress = null;
            alert("Прошло 30 секунд.");
        }
        function restartTimer() {
            clearTimeout(timeoutId);
            timeoutId = setTimeout(someFn, 3000);
        }
        var timeoutId;
        restartTimer();
    </script>
</head>
<body>
    <input id="input1" type="text" onkeypress="restartTimer();" />
</body>
</html>

Все перечисленные выше подходы запускают таймер сразу после загрузки страницы. Если нужно, чтобы таймер запускался только при условии ввода пользователем чего-либо в поле, просто уберите вызов метода restartTimer в секции <script>.

Ваш ответ

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

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