Блог

Главная - Вопросы по программированию - Таймер запуска в зависимости от ответа AJAX

Таймер запуска в зависимости от ответа AJAX

#javascript #php #ajax

#javascript #php #ajax

Вопрос:

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

 <?php
    require(db_conn.php);
    $tv_ip = mysqli_real_escape_string($conn,$_SERVER['REMOTE_ADDR']);
    $tv_select = mysqli_query($conn, "SELECT LocationName FROM busyrooms WHERE IpAddress='$tv_ip'");
    $tv_row= mysqli_fetch_row($tv_select);
    $tvname=$dock_row[0];
    $sql=mysqli_query($conn,"SELECT Location, Status, Date_Time FROM location_status WHERE Location='$tvname' ORDER BY Date_Time DESC LIMIT 1");
    $row = mysqli_fetch_row($sql); 
    $sql2=mysqli_query($conn,"SELECT parameter_value FROM parameters WHERE parameter_name='Normal_Meeting_time'");
    $row2 = mysqli_fetch_row($sql2);
    $name = $row[0];
    $status_from_table =$row[1];
    $target_time=$row2[0];
?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="cache-control" content="no-cache">
    <link rel="stylesheet" href="CSS/pacemaker_styles.css">
    <title>MANAGEMENT SYSTEM</title>
</head>
<body>
  <div id="name"><?=$name ?></div>
  <div id="target">Target</div>
  <div id="target-time"><?=$target_time?></div>
  <div id="status_now"><?=$status_from_table?></div>
  <div id="timer">00:00:00</div>
  <script src="LIB/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
      let status_now = document.getElementById('status_now').innerHTML;
      let targetTime = document.getElementById('target-time');
      let dataTargetTime = targetTime.textContent;
      let actualTime = dataTargetTime.split(':').reduce((acc,time) => (60 * acc)    time);
      let timerVar = setInterval(countTimer, 1000);
      let totalSeconds = 0;
      function countTimer() {
          totalSeconds;
        let hour = Math.floor(totalSeconds /3600);
        let minute = Math.floor((totalSeconds - hour*3600)/60);
        let seconds = totalSeconds - (hour*3600   minute*60);
        if(hour < 10)
          hour = "0" hour;
        if(minute < 10)
          minute = "0" minute;
        if(seconds < 10)
          seconds = "0" seconds;
        document.getElementById("timer").innerHTML = hour   ":"   minute   ":"   seconds;
        if(actualTime == totalSeconds){
          document.getElementById('status_now').style.backgroundColor="#cc0000";
          document.getElementById('status_now').style.color="#ffffff";
          document.getElementById('status_now').innerHTML="Delayed Meeting";
        } 
      }
      document.getElementById('status_now').value = status_now;
      setInterval(() => {
        $.ajax({
          type: "POST",
          url: 'check.php',
          data: {'status': $('#status_now').prop('value')},
          success: function(result) {
            switch (result) {
                case 'ROOM_IN':
                document.getElementById("status_now").innerHTML = "Meeting in progress";
                break;
                
                case 'Room_OUT':
                document.getElementById("status_now").innerHTML = "The room is empty";
                break;

                default:
                document.getElementById("status_now").innerHTML = " There was an error!";
                document.getElementById('status_now').style.backgroundColor="#cc0000";
                break;
            }
          }
        });
      }, 1000);
    });
    </script>
</body>
</html>

The check.php 

 <?php
session_start();
require ('functions.php'); //check_input comes from here
require ('db_conn.php');

$status = check_input($_POST["status"]);
$tv_ip = mysqli_real_escape_string($conn,$_SERVER['REMOTE_ADDR']);
$tv_select = mysqli_query($conn, "SELECT LocationName FROM busyrooms WHERE IpAddress='$tv_ip'");
$tv_row= mysqli_fetch_row($tv_select);
$tvname=$tv_row[0];
$sql=mysqli_query($conn,"SELECT Status FROM location_status WHERE Location='$tvname' ORDER BY Date_Time DESC LIMIT 1");
$row = mysqli_fetch_row($sql); 
$actual_status =$row[0];

if ($status == "RoomIn") {
    echo "ROOM_IN";
} elseif ($status == "DockOut") {
    echo "ROOM_OUT";
}
?>

Таким образом, ajax проверяет базу данных каждую секунду в поисках изменений.(Я думаю, я не уверен)
Если он получает ROOM_OUT, я просто хочу, чтобы div «status_now» сообщал «Комната пуста» и не запускал таймер.
Если он получает Room_In, я хочу запустить таймер и сказать «Совещание продолжается», как всегда, когда достигается целевое время, мне нужно изменить цвет фона таймера div на красный, и если они покинули комнату, то первое, что произойдет. Может кто-нибудь дать мне подсказку, где я ошибся в этом?
Спасибо всем.

Ответ №1:

Запуск и остановка интервального таймера в функции успеха в зависимости от результата.

Кроме того, чтобы не запускать несколько таймеров, я проверяю, установлен ли timerVar он уже перед повторным запуском таймера.

Другая проблема заключается в том, что $("#status_now").prop("value") это неверно. value Свойство существует только во входных элементах, но #status_now является DIV. Используется .text() для получения содержимого DIV.

 $(document).ready(function() {
  let status_now = document.getElementById('status_now').innerHTML;
  let targetTime = document.getElementById('target-time');
  let dataTargetTime = targetTime.textContent;
  let actualTime = dataTargetTime.split(':').reduce((acc, time) => (60 * acc)    time);
  let timerVar;
  let totalSeconds = 0;

  function countTimer() {
      totalSeconds;
    let hour = Math.floor(totalSeconds / 3600);
    let minute = Math.floor((totalSeconds - hour * 3600) / 60);
    let seconds = totalSeconds - (hour * 3600   minute * 60);
    if (hour < 10)
      hour = "0"   hour;
    if (minute < 10)
      minute = "0"   minute;
    if (seconds < 10)
      seconds = "0"   seconds;
    document.getElementById("timer").innerHTML = hour   ":"   minute   ":"   seconds;
    if (actualTime == totalSeconds) {
      document.getElementById('status_now').style.backgroundColor = "#cc0000";
      document.getElementById('status_now').style.color = "#ffffff";
      document.getElementById('status_now').innerHTML = "Delayed Meeting";
    }
  }
  document.getElementById('status_now').value = status_now;
  setInterval(() => {
    $.ajax({
      type: "POST",
      url: 'check.php',
      data: {
        'status': $('#status_now').text()
      },
      success: function(result) {
        switch (result) {
          case 'ROOM_IN':
            document.getElementById("status_now").innerHTML = "Meeting in progress";
            clearInterval(timerVar);
            timerVar = null;
            break;

          case 'Room_OUT':
            document.getElementById("status_now").innerHTML = "The room is empty";
            if (!timerVar) {
              timerVar = setInterval(countTimer, 1000);
            }
            break;

          default:
            document.getElementById("status_now").innerHTML = " There was an error!";
            document.getElementById('status_now').style.backgroundColor = "#cc0000";
            break;
        }
      }
    });
  }, 1000);
});

В вашем PHP вы используете $status для создания выходных данных. Результат запроса находится внутри $actual_status . Так и должно быть:

 if ($actual_status == "RoomIn") {
    echo "ROOM_IN";
} elseif ($actual_status == "DockOut") {
    echo "ROOM_OUT";
}

Комментарии:

1. Какой хороший совет. Это было действительно полезно, спасибо. Теперь осталось только понять, почему status_now не меняется при изменении данных в БД.

2. Убедитесь, что скрипт AJAX не повторяет ничего другого. Проверьте вкладку Сеть, чтобы увидеть полный ответ.

3. К сожалению, скрипт больше ничего не повторяет.

4. Может быть, есть пробелы, попробуйте switch(result.trim()) . Если это не сработает, добавьте console.log(result) , чтобы увидеть, что он на самом деле получает.

5. Я зарегистрировал его, сначала он получает его прямо из БД при загрузке страницы, но когда я меняю данные в БД не на странице на ROOM_OUT, страница не распознает изменение. Я думаю, что в коде может быть логическая ошибка. Он просто продолжает регистрировать первое, что он получает.