jQuery Mobile 每 10 秒只重新加载一个 div答案

【问题标题】：jQuery Mobile reload only a div every 10 secondsjQuery Mobile 每 10 秒只重新加载一个 div
【发布时间】：2017-08-19 05:05:51
【问题描述】：

我正在开发一个简单的网络（使用 jQuery mobile），

主页包含一个 div（将每 10 秒重新加载一次）。

 <div id="mainpage" data-role="page" >

        <div data-role="header" data-position="fixed" data-theme="b" >
            <h1><font face="Comic Sans Ms">Home</font></h1>
        </div>

    <div data-role="content" data-theme="b" >
        <div id="content_to_reload">
         //Reload every 10 seconds
//AJAX call to server   
        </div>
    </div>


    <div data-role="footer" data-theme="b" data-position="fixed">       
        <div data-role="navbar">
            <ul>
                <li><a href="page2.html"><img src="1.png" width="50"></a></li>
                <li><a href="page3.html"><img src="2.png" width="50"></a></li>
                <li><a href="page4.php"><img src="3.png" width="50"></a></li>

            </ul>
        </div><!-- /navbar -->
    </div><!-- /footer -->

这是 jQuery 重新加载内容#content_to_reload:

<script type="text/javascript">
          $(document).ready(function () {
             $('#content_to_reload').delay(10000).load('myserver.php');
          });
      </script>

它已经奏效了。但我还有其他问题：

每次重新加载时，页脚看起来就像添加其他页脚
当我转到 page2.html 时，它也会每 10 秒重新加载一次。

【问题讨论】：

标签： javascript jquery jquery-mobile

【解决方案1】：

您应该使用jQuery.html() 而不是load()：
```
$('#content_to_reload').html(data);
```

您应该使用 JQM pagecontainer 检查当前页面：

$(document).on('pagecontainershow', function(e, ui) {
  switch (ui.toPage.prop('id')) {
    case 'mainpage':
      // start call to server
      break;
    default:
      // for all other cases, stop call to server
  }
});

用一个简单的计时器代替delay：

var callInterval = 10; // seconds
var timerId = setInterval(function() {
  callToServer();
}, callInterval * 1000);

...您可以在切换活动页面时停止：

clearInterval(timerId);

把它们放在一起：DEMO

【讨论】：