У меня есть переменная с двумя временными интервалами в javascript, которая выполняется с 1 секундой и составляет 5 секунд. и я даю спать в myTimer1(). В этом состоянии функция текущего времени myTimer() показывает задержку отображения времени в браузере. На самом деле он прыгает за секунду. Я хочу, чтобы секунды отображались в реальном времени. Если у вас есть альтернативный способ отображения реального времени, это очень важно. Я сталкиваюсь с таким сценарием в веб-приложении на основе MVC.

<!DOCTYPE html>
<html>
<body>

<p>A script on this page starts this clock:</p>
<p id="demo"></p>
<p id="demo1"></p>
<script>
var myVar = setInterval(function(){ myTimer() }, 1000);

function myTimer() {
    var d = new Date();
    var t = d.toLocaleTimeString();
    document.getElementById("demo").innerHTML = t;
}

var myVar1 = setInterval(function(){ myTimer1() }, 5000);

function myTimer1() { 
document.getElementById("demo1").innerHTML = "Prashant";
//Calling some function from server side which taking some time to calculated data to showing on browser and it will take some time to load like 2-3 sec. so I use sleep for example.
sleep(3000);
}

function sleep(milliseconds) {
  var start = new Date().getTime();
  for (var i = 0; i < 1e7; i++) {
    if ((new Date().getTime() - start) > milliseconds){
      break;
    }
  }
}

</script>

</body>
</html>
0
Prashant Mehta 19 Апр 2016 в 16:38

2 ответа

Лучший ответ

Вы не думали о том, чтобы просто полностью удалить вызов sleep()? Подобные вызовы часто могут вызывать невероятно низкую производительность и неожиданные результаты (поскольку они связывают ваш поток пользовательского интерфейса):

function myTimer1() { 
    document.getElementById("demo1").innerHTML = "Prashant";
    // This is going to clog up your UI thread and prevent anything from occurring
    // sleep(3000);
}

Попробуйте удалить его, и вы увидите, что ваш таймер работает постоянно. Если вам все же нужно вызвать задержку, просто используйте { {X0}}, чтобы справиться с этим (и остановить текущий таймер).

Пример без sleep()

<!DOCTYPE html>
<html>
<body>

<p>A script on this page starts this clock:</p>
<p id="demo"></p>
<p id="demo1"></p>
<script>
var myVar = setInterval(function(){ myTimer() }, 1000);

function myTimer() {
    var d = new Date();
    var t = d.toLocaleTimeString();
    document.getElementById("demo").innerHTML = t;
}

var myVar1 = setInterval(function(){ myTimer1() }, 5000);

function myTimer1() { 
document.getElementById("demo1").innerHTML = "Prashant";

}

function sleep(milliseconds) {
  var start = new Date().getTime();
  for (var i = 0; i < 1e7; i++) {
    if ((new Date().getTime() - start) > milliseconds){
      break;
    }
  }
}

</script>

</body>
</html>

Относительно комментария к базе данных

Если вы извлекаете пользователей из базы данных, вы должны позволить предположительно AJAX-вызовам обрабатывать их по завершении. Если вы хотите привлекать нового пользователя каждые 5 секунд, вы можете подумать об использовании такой проверки:

 // Keep track of how many users you have pulled
 var usersPulled = 0;

 // Every 5 seconds, pull a user
 var userTimer = setTimeout(function(){ pullUser(); }, 5000);

 function pullUser(){
      // Make an AJAX call to pull your specific user
      $.get('/Users/Get', { skip: usersPulled++ }, function(user){
          if(user)
          {
             // Get the user that was pulled and output them
             $('#userlist').append('<p>' + user + '</p>');
          }
          else
          {
             // No user was found, stop your timer
             clearTimeout(userTimer);
          }
     });
}

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

public string Get(int skip)
{
      // Get the first user available
      var user = _context.Users.OrderBy(u => u.Name).Skip(skip).FirstOrDefault();
      if(user != null)
      {
            return user.Name;
      }
      return null;
}
2
Rion Williams 19 Апр 2016 в 13:56

В браузерах есть только один основной поток JavaScript пользовательского интерфейса, который работает в системе очереди событий (очереди заданий). Когда вы планируете таймер через setTimeout или setInterval, когда наступает время, когда он должен вызвать обратный вызов, на самом деле происходит то, что задание (событие) ставится в очередь для обработки основного потока пользовательского интерфейса. когда можно.

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

Просто удалите sleep. Он не делает ничего полезного. Это делает что-то бесполезное .

Если по какой-то причине вы хотите сделать что-то через три секунды после вызова timer1, вы должны сделать это с помощью setTimeout:

function myTimer1() { 
    document.getElementById("demo1").innerHTML = "Prashant";
    setTimeout(function() {
        // Do the thing you wanted to do 3 seconds later
    }, 3000);
}

В комментарии вы сказали:

В основном просто ставлю Sleep например. данные поступают из sql-соединения, и это займет некоторое время.

Что ж, ужасно сложно помочь вам с кодом, который мы не видим.

Обычно вы запрашиваете эти данные через ajax, и поэтому они будут асинхронными (как мой setTimeout выше), и не блокировать браузер, если вы не указали, что он синхронный (подсказка: не делайте что используйте обратный вызов).

1
T.J. Crowder 19 Апр 2016 в 13:48