JS轮询|极客笔记

JS轮询

在网页开发中，我们经常会遇到需要定时获取服务器端数据或者监测某个状态变化的情况。这时候就需要使用轮询技术来实现定时向服务器发送请求，并进行相应处理。在本文中，我们将详细介绍JS轮询的概念、实现方式以及一些注意事项。

什么是轮询

轮询（Polling）是一种通过定时发送请求来获取最新数据的技术。其原理很简单：在一个固定的时间间隔内，定时向服务器发送请求，检查是否有新的数据返回。如果有，就更新页面内容；如果没有，继续等待下一次轮询。

基本实现方式

传统轮询

最简单的轮询方式就是使用setInterval函数来定时执行一个函数，这个函数里面发送AJAX请求到服务器端获取数据，然后进行相应处理。以下是一个简单的示例：

setInterval(function() {
    // 发送AJAX请求
    var xhr = new XMLHttpRequest();
    xhr.open('GET', '/data', true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            var data = JSON.parse(xhr.responseText);
            // 处理返回的数据
        }
    };
    xhr.send();
}, 5000); // 每5秒发送一次请求

这段代码会每5秒向/data路径发送一个GET请求，获取服务器返回的数据并进行处理。

长轮询

传统轮询的缺点是可能会造成不必要的请求浪费，尤其是在数据更新不频繁的情况下。长轮询（Long Polling）是一种改进的轮询方式，它在服务器持有请求并等待直到有新数据可用后再响应。以下是一个长轮询的示例：

function longPolling() {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', '/data', true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            var data = JSON.parse(xhr.responseText);
            // 处理返回的数据
            longPolling(); // 递归调用再次发起长轮询
        } else {
            setTimeout(longPolling, 1000); // 如果未成功收到数据，延迟1秒后再次发送请求
        }
    };
    xhr.send();
}

longPolling();

这段代码会向/data路径发送一个GET请求，服务器会保持连接打开一段时间，直到有新数据可用或者超时。如果请求成功，就处理返回的数据并继续发起长轮询；如果失败，就延迟1秒后再次发起长轮询。