Обновление страницы

У меня проблема с моим скриптом

я хочу обновлять страницу каждые 30 секунд,

Но ТОЛЬКО когда вы НЕ печатаете в текстовое поле

ДРУГОЕ ВАЖНОЕ

страница должна обновляться, если я печатаю в текстовое поле, и я останавливаюсь, не нажимая кнопку отправки в течение 1 минуты (в режиме ожидания)

<!DOCTYPE html>
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
var isTyping = false;
$("#inputbox").focus(function() {
    isTyping = true;
});
$("#inputbox").blur(function() {
    isTyping = false;
});

// Refresh page, but ONLY when you are NOT typing
var refreshId = setInterval(function() {
    if (!isTyping) {
        window.setTimeout( function() {
  window.location.reload();
)}, 30000); 
    }
)}
$.ajaxSetup({ cache: false });
</script>
</head>
<body>

<input type = "text" id = "inputbox">
<button type = "button">Click Me!</button> 
</body>
</html>
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
19
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вместо проверки «isTyping» вы можете отменить setTimeout и создавать новый каждый раз, когда пользователь что-то делает.

  • Отменить/запустить новый таймер (60 с) при фокусе/вводе.
  • Отменить/запустить новый таймер (30 с) при размытии.
  • Запустите тайм-аут при загрузке страницы.

Вот реализация (тайм-аут изменен на x100 мс вместо x1000 только для тестирования и некоторый вывод, чтобы увидеть, что происходит)

var timerId;

function restartTimer(s) {
  clearInterval(timerId);
  timerId = setTimeout(() => {
    //window.location.reload()
    $("#out").text("times up");
  }, s * 100  /* * 1000, 100 for testing */);

  $("#out").text("timer restarted: " + s + "s " + timerId);
}

$("input").on("focus input", () => restartTimer(60));
$("input").on("blur", () => restartTimer(30));

// "technically" startTimer, but it's the same
restartTimer(30);

// optionally only if "idle"
//$("document").on("mousemove click", () => restartTimer(30));
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<input type = "text" id = "inputbox">
<button type = "button">Click Me!</button>

<div id = "out"></div>

Другие вопросы по теме