当前位置：首页 > jquery

jquery 轮询

2026-03-16 22:19:48jquery

jQuery 轮询的实现方法

轮询（Polling）是一种通过定时向服务器发送请求来获取最新数据的技术。jQuery 可以简化 AJAX 请求的实现，以下是几种常见的轮询方法。

使用 `setInterval` 实现基础轮询

通过 setInterval 定时触发 AJAX 请求，实现轮询效果。

function fetchData() {
    $.ajax({
        url: 'your-api-endpoint',
        method: 'GET',
        success: function(data) {
            console.log('Data received:', data);
            // 处理返回的数据
        },
        error: function(error) {
            console.error('Error fetching data:', error);
        }
    });
}

// 每 5 秒轮询一次
setInterval(fetchData, 5000);

使用 `setTimeout` 实现递归轮询

递归调用 setTimeout 可以更灵活地控制轮询间隔，尤其是在请求失败时调整轮询频率。

function pollData() {
    $.ajax({
        url: 'your-api-endpoint',
        method: 'GET',
        success: function(data) {
            console.log('Data received:', data);
            // 处理返回的数据
            setTimeout(pollData, 5000); // 5 秒后再次轮询
        },
        error: function(error) {
            console.error('Error fetching data:', error);
            setTimeout(pollData, 10000); // 失败时延长轮询间隔
        }
    });
}

// 启动轮询
pollData();

动态调整轮询间隔

根据服务器负载或业务需求动态调整轮询间隔。

let pollInterval = 5000; // 初始轮询间隔 5 秒

function dynamicPoll() {
    $.ajax({
        url: 'your-api-endpoint',
        method: 'GET',
        success: function(data) {
            console.log('Data received:', data);
            // 根据返回数据动态调整轮询间隔
            if (data.isBusy) {
                pollInterval = 10000; // 服务器繁忙时延长间隔
            } else {
                pollInterval = 5000; // 恢复正常间隔
            }
            setTimeout(dynamicPoll, pollInterval);
        },
        error: function(error) {
            console.error('Error fetching data:', error);
            pollInterval = 15000; // 失败时进一步延长间隔
            setTimeout(dynamicPoll, pollInterval);
        }
    });
}

// 启动动态轮询
dynamicPoll();

使用 `Promise` 优化轮询逻辑

结合 Promise 可以更好地管理异步操作和错误处理。

function fetchDataWithPromise() {
    return new Promise(function(resolve, reject) {
        $.ajax({
            url: 'your-api-endpoint',
            method: 'GET',
            success: resolve,
            error: reject
        });
    });
}

function pollWithPromise() {
    fetchDataWithPromise()
        .then(function(data) {
            console.log('Data received:', data);
            setTimeout(pollWithPromise, 5000);
        })
        .catch(function(error) {
            console.error('Error fetching data:', error);
            setTimeout(pollWithPromise, 10000);
        });
}

// 启动 Promise 轮询
pollWithPromise();

轮询终止条件

在某些场景下需要终止轮询，可以通过清除定时器实现。

jquery 轮询

let pollTimer;

function startPolling() {
    pollTimer = setInterval(function() {
        $.ajax({
            url: 'your-api-endpoint',
            method: 'GET',
            success: function(data) {
                console.log('Data received:', data);
                if (data.shouldStop) {
                    stopPolling(); // 满足条件时停止轮询
                }
            },
            error: function(error) {
                console.error('Error fetching data:', error);
            }
        });
    }, 5000);
}

function stopPolling() {
    clearInterval(pollTimer);
    console.log('Polling stopped');
}

// 启动轮询
startPolling();