Question

在坚果shell中，如果用户不在主页上，我需要清除一个名为newsCheck的函数的间隔。看起来很简单，我也这么认为。这给我带来了巨大的问题。我使用历史api，这就是为什么间隔不会在页面重新加载和更改时清除。

这就是我所遗漏的无关紧要的脚本

//only run if on home page
if (url == 'Home' || url == ''  || url == 'home' || url == 'home.html' || url == 'Home.html'){

    //set up interval handler for cancellation when not on home 
    var handle=self.setInterval(function(){newsCheck()},1000);

    // ...

}//close if Home clause 
else
{
    handle = self.clearInterval(handle);
}

好的，newsCheck是一个通过ajax查询（轮询）检查数据库中的新信息的函数。当不在家时，这需要取消，因为它不需要它。

有关历史API的详细信息

我需要取消间隔，因为我使用历史API脚本加载新页面，因此即使我们不在主页上，该功能也会继续运行。

为了解决这个问题，我将其放在历史API的loadContent函数中。

$.ajax({
         type: "GET",
         url: "AJAX/request_feed.js",
         dataType: "script"
        });

正如您所看到的，它会运行我们所在的任何页面，以便可以取消newsCheck功能。这就是为什么我在上面的脚本中检查了url。

在带有newsCheck函数的脚本中，我将url变量放在(document).ready之前，以便在url更改为新url时检索url，这样就不会获取url改为上一页。然后我们检查URL并在Home上运行脚本，如果不是，我们清除间隔。

Answer 1

我认为这就是你想要的：

//only run if on home page
if (url == 'Home' || url == ''  || url == 'home' || url == 'home.html' || url == 'Home.html'){

    //set up interval handler for cancellation when not on home 
    var handle= setInterval(function(){newsCheck()},1000);

    // ...

}

编辑：鉴于您要使用HTML5历史记录API更改代码，我认为您需要的是：

// Set up the handle globally, because you won't have a history event triggered right away
var handle = setInterval(function(){newsCheck()},1000);
// Cancel it right away if you're not on the home page
if (url != 'Home' && url != ''  && url != 'home' && url != 'home.html' && url != 'Home.html') {
    clearinterval(handle);
}

// Listen for history API events
window.addEventListener('popstate', function(event) {
    // Check the new url
    if (url == 'Home' || url == ''  || url == 'home' || url == 'home.html' || url == 'Home.html') {
        // On the home page now, so set up the interval
        // And we're inside an anonymous function now, so scope the handle to the window
        window.handle = setInterval(function(){newsCheck()},1000);
    } else {
        // Not on the home page now, so clear the interval
        // No guarantee that the interval exists at this point
        if(window.handle)
            clearinterval(window.handle);
    }
});

而且我认为你需要为'pushstate'事件监听器做类似的事情，但我对这件事情有点模糊，所以你只需要尝试看看。

原始回复

几点指示。

setInterval是大多数浏览器javascript实现中的本机代码。您无需将其范围扩展到任何地方。请参阅MDN上的文档和示例。
您无需清除主页以外的页面上的间隔。主页以外的页面应该设置好。
每秒一次新闻新闻非常疯狂。一旦你解决了代码，我强烈建议你移动更长的时间间隔。你的服务器和你的用户计算机速度慢，延迟时间很长，或只是糟糕的互联网服务会感谢你。
根据您从url获得的位置，可能完全是假的。你确认它有合适的价值吗？你确定你所比较的所有价值都是可能的吗？

此外，MDN还要说明从间隔调用的长时间运行操作：

危险用法

如果您的逻辑可能需要比间隔时间更长的时间来执行，建议您使用window.setTimeout递归调用命名函数。例如，如果使用setInterval每5秒轮询一次远程服务器，网络延迟，无响应的服务器以及许多其他问题可能会阻止请求在其分配的时间内完成。因此，您可能会发现自己排队的XHR请求不一定按顺序返回。

对于这种情况，首选递归setTimeout模式：

(function loop(){
    setTimeout(function(){

       // logic here

       // recurse
       loop();

    }, 1000);
})();

在上面的代码片段中，声明了一个命名的函数循环并立即执行。在逻辑完成执行后，在setTimeout内递归调用循环。虽然这种模式不能保证在固定的时间间隔内执行，但它确保在递归之前完成了前一个时间间隔。

我建议从AJAX完整回调中为下一个newsCheck（）调用设置超时。这样它仍然是异步的，你不可能一次触发多个请求。

如果不符合标准，则清除间隔

1 个答案: