我可以在没有无限间隔的情况下检测文件更改或重新加载页面吗？

My problem is basically the following: I have a webpage running an online radio on another subdomain (Airtime sourcefabric). Now I figured out that this radio plugin has a nice real-time API, so I can access the prevoius, the current, and the next track (and show) infos in JSON from this URL: http://music.wickedradionet.com/api/live-info .

我的问题基本上如下：我有一个网页在另一个子域（Airtime sourcefabric）上运行在线广播。现在我发现这个无线电插件有一个很好的实时API，所以我可以通过这个URL访问JSON中的prevoius，当前和下一个音轨（和显示）信息：http：//music.wickedradionet.com / api / live-info。

I need to show these infos on the webpage. I can make it work with a javascript interval, updating the infos from the API URL every second (or every 5 second, doesn't matter), but I think there must be a better way doing this.

我需要在网页上显示这些信息。我可以使用javascript间隔工作，每秒（或每5秒，无关紧要）更新API URL中的信息，但我认为必须有更好的方法来做到这一点。

Is there any way to check if the file was changed, and update the infos only if they aren't the same? I think it can be done with some tricky PHP like setting up a CRON job, or maybe with a WebSocket thing. Any better way than checking it in a JS interval?

有没有办法检查文件是否已更改，并且只有在它们不相同时更新信息？我认为可以通过一些棘手的PHP来完成，例如设置CRON作业，或者使用WebSocket。有没有比在JS间隔中检查更好的方法？

The javascript I use now for updating: http://wickedradionet.com/js/wickedradio-playlist.js

我现在使用的javascript更新：http：//wickedradionet.com/js/wickedradio-playlist.js

2 个解决方案

#1

Below describes two ways on how you can improve your polling:

下面介绍了如何改进轮询的两种方法：

1) More efficient AJAX Polling

1）更有效的AJAX轮询

Instead of constantly performing an ajax request every second (whether or not you get the data), you can create a hacky open connection with the server to poll once the request is completed as shown below. The important part of the $.ajax() call is the complete option. The timeout (i.e. 30 seconds) is to make sure the polling continues if the cycle ever breaks.

而不是每秒不断地执行ajax请求（无论您是否获得数据），您可以创建与服务器的hacky open连接，以便在请求完成后进行轮询，如下所示。 $ .ajax（）调用的重要部分是完整选项。超时（即30秒）是为了确保在循环中断时继续轮询。

(function betterPoll(){
    $.ajax({ url: 'http://music.wickedradionet.com/api/live-info/', success: function (data) {
        // do something with "data"
    }, dataType: "json", complete: betterPoll, timeout: 30000 });
})();

2) WebSocket Connection

2）WebSocket连接

An even better alternative is WebSocket. This allows for a full-duplex, low-latency connection to stay open between the client and server, enabling "real time" communication.

一个更好的选择是WebSocket。这允许全双工，低延迟连接在客户端和服务器之间保持打开，从而实现“实时”通信。

If you're using Node.js, the docs provide examples on how you can use Socket.IO for WebSocket communication. If you're using PHP, a quick search led me to Ratchet and PHP WebSockets.

如果您使用的是Node.js，则文档提供了有关如何使用Socket.IO进行WebSocket通信的示例。如果你正在使用PHP，快速搜索引导我使用Ratchet和PHP WebSockets。

Below is an example using Socket.IO:

下面是使用Socket.IO的示例：

In your HTML:

在您的HTML中：

<script src="https://cdn.socket.io/socket.io-1.3.5.js"></script>
<script src="example.js"></script>

In "example.js", you can have something like this:

在“example.js”中，您可以使用以下内容：

var socket = io.connect('http://music.wickedradionet.com/api/live-info/');
socket.on('an event', function (data) {
  // do something with "data"
  socket.emit('another event', { other: 'data' });
});

On the server, you would do something similar using .on('another event', function () {}) and .emit('an event', function () {}).

在服务器上，你可以使用.on（'另一个事件'，function（）{}）和.emit（'一个事件'，function（）{}）做类似的事情。

#2

You have exact time when the file will change, it is the time when next song starts. All you need to do is to calculate time difference to schedule new request.

你有确切的时间来改变文件，这是下一首歌开始的时间。您需要做的就是计算时差以安排新请求。

function stringToDate(s)  {
	s = s.split(/[-: ]/);
	return new Date(s[0], s[1]-1, s[2], s[3], s[4], s[5]*1);
};
function getPlaylistData() {
	$.ajax({
		dataType: "jsonp",
		url: "http://music.wickedradionet.com/api/live-info/",
		success: function (result) {
			/* Change your DOM, than calculate time for next request this way: */
			var requestTime = stringToDate( result.schedulerTime ).getTime() - result.timezoneOffset*1000;
			var nextChange = stringToDate( result.next.starts ).getTime();
			var differenceInMiliseconds = nextChange-requestTime;
			console.log( differenceInMiliseconds );
			setTimeout(getPlaylistData, differenceInMiliseconds);
		}
	});
};
$(document).on('ready', function () {
    getPlaylistData();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

#1