创建与服务器同步的 JavaScript 计时器

Question

1 - 我建议您使用规则flex。将其添加到您的 CSS 中：#message{  display: flex;  align-items: center;  justify-content: center;}2 - 从此标签中删除styles属性和样式p：<p style="margin-bottom:auto;text-align:center;">...</p>3 - 此外，您的span #message标签是display: inline动态的。您需要在javascript或中禁用此功能jquery。或者!important用于：display: flex_#message#message{  display: flex!important;  ...}如果您遵循我的回答，那么您的绿色标题的内容会看起来不错。.ShowHide {  overflow: hidden;  background-color: #2a4735;  color: white;}#left-showing {  overflow: hidden;}#right-showing {  float: right;  width: 30px;  text-align: center;}.ShowHide a {   color: white;   text-decoration: none;}.ShowHide a:hover {   text-decoration:underline;}#message{  display: flex;  align-items: center;  justify-content: center;}@media screen and (max-width: 425px){  #message{font-size:10px;}  .shippingimage{display:none;}}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="ShowHide" id="Bar">  <div id="right-showing">    <a href="#" onclick="Hide(Bar);">X</a>  </div>    <div id="left-showing">    <p>      <span id="message"></span></p>        <script type="text/javascript">    function nextMsg(index) {        if (messages.length === index) {            nextMsg(0);        } else {            $('#message').html(messages[index]).fadeIn(1000).delay(2000).fadeOut(1000, ()=> nextMsg(index+1));        }    };    var messages = [        '<img src="https://i.imgur.com/bcq9ydY.png" width="30px" class="shippingimage"><a href="https://www.fermento24.com/pages/spedizione" style="letter-spacing: -0.5px;vertical-align: super;">Consegna gratuita in giornata a Napoli, Caserta e relative province sopra i 25€</a>',        '<img src="https://i.imgur.com/pSAQiQp.png" width="35px" class="shippingimage"><a href="https://www.fermento24.com/pages/spedizione" style="vertical-align: super;"> Spedizione gratuita nel resto d’Italia sopra i 120€</a>',    ];    $('#message').hide();    nextMsg(0);    </script></div></div>

Answer 1

实际上，我认为你指的是方法setInterval。我相信你应该使用一个初始值为1的计数器。每次调用interval方法后，计数器应该增加1，然后你可以检查计数器是否超过了值60，然后才进行ajax调用并重新启动everythink 。

它应该看起来像这样

var counter = 1;

var timer = 0;

yourAjaxCall();

var t = setInterval(function(){

    //do client side stuff with time

    //after you done check if time needs to be fetched from server {60 seconds passed}

    counter++;

    if(counter >= 60){

        counter = 1;

        yourAjaxCall();

    }

}, 1000);

function yourAjaxCall(){

    $.ajax({

        url: 'yoururl',

        type: 'post',

        success: function(response){

            timer = response;

        }

    });

}