Как Javascript обрабатывает длинные задачи, например, таймер обратного отсчета

У меня есть код Javascript, который запускает обратный отсчет таймера, который обновляет счетчик в секунду в моей базе данных. Я использовал AJAX для запуска моего скрипта, обновления моей базы данных и получения данных (счетчик - секунды) из моей базы данных, чтобы отобразить их в моем пользовательском интерфейсе. Однако, как только я обновляю страницу и / или перехожу на другую страницу своего веб-сайта, сценарий останавливается и начинает обратный отсчет, и это влияет на мою базу данных, поэтому mysql не может продолжать отображать оставшееся время. Что мне делать?

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
  <title>Timer</title>
</head>
<script type = "text/javascript" href = "//code.jquery.com/jquery-3.3.1.min.js
"></script>
<body>
<form method = "post">
<div>
  <div class = "row justify-content-center" style = "
  text-align: center;margin-bottom: 20px; z-index: 1;">
    <input type = "number" id = "time_hr" value = "00" style = "width: 40px; text-align: center;" maxlength = "2">
    :<input type = "number" id = "time_min" value = "00" style = "width: 40px; text-align: center;" maxlength = "2">
    :<input type = "number" id = "time_sec" value = "00" style = "width: 40px; text-align: center;" maxlength = "2">
    <input type = "button" id = "btn_Time" value = "GO" onclick = "startNa()">
  </div>
  <div>
  </div><br>
  <div class = "row" style = "z-index: 1;">
    <p id = "time1" style = "font-size: 50px; text-align: center;"></p>
  </div>
</div>
<script>
    $(document).ready(function(){

    setInterval(getTimer1, 1000);

  });

    var ctr;
    var timerInterval;
    function timerKo() {

      var minShow = parseInt(ctr/60) < 10 ? "0"+ parseInt(ctr/60) :  parseInt(ctr/60);

      var hourShow = parseInt(ctr/3600) < 10 ? "0"+parseInt(ctr/3600) : parseInt(ctr/3600);

      var secShow = ctr%60 < 10 ? "0"+(ctr%60) : (ctr%60);
      // document.getElementById('time1').innerHTML = hourShow+":"+ minShow+":"+secShow;
      // document.getElementById("counter1").innerHTML = ctr;

      $.post('updateTimerTime.php',
        {
          'timer1_update':true,
          'seconds': ctr
        },function(data, status)
        {
          // alert(data);
        });
      ctr--;
      if (ctr == -1) {
        // <?php
        //  shell_exec - off
        // ?>```````
        alert("ZERO Na");
        clearInterval(timerInterval);
      }

    }
    function startNa() {
      var sec = parseInt(document.getElementById("time_sec").value);
      var min = parseInt(document.getElementById("time_min").value);
      var hour = parseInt(document.getElementById("time_hr").value);
      hour = hour * 60 * 60;
      min = min  * 60;
      sec = sec;
      ctr = hour + min + sec;
      timerInterval = window.setInterval(timerKo, 1000);

    }

    function getTimer1()
    {
      $.post('getTimerTime.php',
      {
          'getTimer1': true
      }, function(data, status){
        $("#time1").html(data);
      });
    }
  </script>
</form>
</body>
</html>

<?php
    require 'conn.php';
    if (isset($_POST['timer1_update']))
    {
        // echo "TIIMER ";
        $seconds = $_POST['seconds'];
        $sql = "UPDATE timers SET timerswitch='$seconds' WHERE id=1";
        mysqli_query($db, $sql);

    }

?>

<?php
    require 'conn.php';
    if (isset($_POST['getTimer1'])) {
        $sql = "SELECT * FROM timers WHERE id=1";
        $result = mysqli_query($db, $sql);
        $data = mysqli_fetch_array($result);
        $time_1 = $data['timerswitch'];
        $sec_1 = intval($time_1%60) < 10 ? 0 . intval($time_1%60) : intval($time_1%60);
        $min_1 = intval(($time_1/60)%60) < 10 ? 0 . intval(($time_1/60)%60) : (($time_1/60)%60);
        $hr_1 = intval($time_1/3600) < 10 ? 0 . intval($time_1/3600) : intval($time_1/3600);
        echo $hr_1 . ":" . $min_1 . ":" . $sec_1;

    }
?>

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

— 18.08.2018 04:49

Вы не можете заставить людей оставаться на этой странице, использование таймера на стороне клиента - не лучшая идея.

— 18.08.2018 04:54

"как только я обновляю страницу и / или перехожу на другую страницу своего веб-сайта, скрипт останавливается" Если вы сохраните обратный отсчет в javascript (на стороне клиента) после перехода на новую страницу или обновления / перезагрузки, ваш javascript также потеряет предыдущие значения и выполнится, как в первый раз. Если вы попытаетесь обновить свою базу данных в цикле, вы начнете рассылать спам на свой веб-сайт с запросами и, возможно, вызовете автоматический DDOS. Как было предложено выше, сохраните время начала и при перезагрузке / навигации используйте это время и текущее время для запуска счетчика.

— 18.08.2018 05:00

Большое спасибо. Чтобы уточнить, я могу использовать javascript, чтобы вставить свое время начала в мою базу данных и использовать PHP для обратного отсчета в моем пользовательском интерфейсе?

— 18.08.2018 05:07

Используйте Javascript, чтобы передать время начала и сохранить его в базе данных с помощью PHP. Когда вы показываете свой таймер, используйте Javascript.

— 18.08.2018 05:42

javascript php ajax

18.08.2018 04:44

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

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

Как сделать условие где из массива в mysql php

Я использую ajax my с разбивкой на страницы на следующей странице № 2 моя кнопка «Изменить» и «проверка» не работают

Получить значение из ajax в поле ввода

Laravel: получение результатов таблицы по имени категории вместо идентификатора

Lumen 5.6.4 получает исключение MethodNotAllowedHttpException после отправки маршрута

Как правильно получить информацию из массивов, чтобы ее можно было вставить в базу данных?

Выпадающий список Laravel 5.5

Php natsort () не работает должным образом

Preg_match_all добавить символ до и после

Получить объект JSON из Xamarin в PHP?

Как Javascript обрабатывает длинные задачи, например, таймер обратного отсчета

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

Похожие вопросы