jQuery mobile 停止运行当前页面中使用的脚本后移动到下一页答案

【问题标题】：jQuery mobile stop running the script in the current page used after moving to the next pagejQuery mobile 停止运行当前页面中使用的脚本后移动到下一页
【发布时间】：2013-08-27 01:35:18
【问题描述】：

在我的 jQuery 移动应用程序中，我将所有脚本加载到索引页面（比如 index.php）并且不使用任何脚本（rel="external" 或 data-ajax ="false") 用于链接页面以使应用程序完全加载 Ajax。但是在我的应用程序中，我只想为一页运行脚本（比如 home.php），离开该页面后，我想杀死正在使用的脚本。在 home.php 中，我正在使用 $(document ).on('pageinit', function(){ }) 用于加载脚本。

但我发现我在 home.php 中使用的脚本在离开该页面后在我的整个应用程序中运行。

如何停止通过page-init函数使用的脚本运行而不使用（rel="external" 或 data-ajax="false"）？

这是我在 home.php 中使用的代码，

<script type="text/javascript">
                $(document).on('pageinit', function(){
    var auto_refresh = setInterval(
             function ()
            {
                 /*  */
                $("#color-bar").load("controller/file.txt");
                        }, 3000);
                });
</script>

我想在离开 home.php 后停止加载file.txt。

【问题讨论】：

在 home.php 中为您的页面提供 id id="home" 和 $("#home").on('pageinit', function () { etc... });。这将仅针对页面#home 运行。此外，您可以将pageinit 替换为pagebeforeshow 或pageshow。并使用pagehide 停止间隔$('#home').on('pagehide', function () { clearInterval; });。
我认为问题出在我使用的 load() 函数上，当我的函数中有 load() 以外的其他代码时，它工作正常。 jQuery Mobile 中的 load() 有什么替代方法吗？
对于外部文件，.load() 没有其他选择。你试过清除间隔吗？
不，它的工作方式与我提到的相同，但需要注意的重要一点是，在刷新我的 home.php 页面并将 rel="external" 添加到链接后，它工作正常，但是我不需要这样做。
感谢 Omar，现在它运行良好。我试过pagebeforeshow()、pagehide()和clearInterval()。

标签： javascript jquery ajax jquery-mobile loading

【解决方案1】：

因为，Omar 建议我想提供一个 id 而不是 $(document)。使用 pagebeforeshow 或 pageshow 、 pagehide 并清除间隔将解决此问题。以下代码对我有用，

var auto_refresh;
$("#light-page").on('pagebeforeshow', function(){
  auto_refresh = setInterval(function () {
    // code
  }, 3000);
});

$('#light-page').on('pagehide', function () { 
  clearInterval(auto_refresh);
});

在 Html 中添加 id：

<div data-role="page" id="light-page">
   </div>

【讨论】：