Ajax 실시간 새로고침 처리 보러오세요

ajax 튜토리얼column에서는 실시간 새로 고침 처리를 소개합니다

권장(무료): ajax 튜토리얼(동영상)

As 오래된 프런트엔드, 이건 케이스는 jquery를 기반으로 작성합니다.

데이터를 얻기 위한 프런트 엔드 렌더링 페이지는 ajax와 소켓에 지나지 않습니다. 다른 것들은 아직 사용되지 않았지만 프로젝트에서는 여전히 ajax를 더 많이 사용합니다.

Ajax Short Polling을 기반으로 한 간단한 요청을 살펴보겠습니다

function req() {
    $.ajax({
        type: 'get',
        url: 'demo.php',
        dataType: 'json',
        success: function(res) {
            console.log(res);
        },
        error: function() {
            console.log('请求失败~');
        }
    });
}
req();
setInterval(req, 3000);

네트워크 속도가 빠르고 안정적이면 이렇게 사용할 수 있지만 네트워크 속도가 불안정하면 누가 판단할 수 있겠습니까? 인터페이스를 요청하는 데 5~10초가 걸리며 이로 인해 Ajax 요청이 누적되어 헤아릴 수 없는 문제가 발생합니다. 그렇다면 이 문제를 피하는 방법은 무엇입니까?

방법 1: 요청에 변수를 할당한 다음 각 설문 조사에서 요청을 중단합니다

var ajaxReq = null;
function req(isLoading) {
    if(ajaxReq !== null) {
        ajaxReq.abort();
        ajaxReq = null;
    }
    ajaxReq = $.ajax({
        type: 'get',
        url: 'demo.php',
        dataType: 'json',
        beforeSend: function() {
            if(isLoading) {
                $('.zh-loading').show();
            }
        },
        success: function(res) {
            console.log(res);
        },
        complete: function() {
            if(isLoading) {
                $('.zh-loading').hide();
            }
        },
        error: function() {
            console.log('请求失败~');
        }
    });
}
req(true);
setInterval(function() {
    req(false);
}, 3000);

얼핏 보기에는 괜찮은 것 같고 거의 괜찮은 것 같지만 프런트엔드에서는 계속해서 더 적합한 것을 찾아야 합니다. 방법이므로 다음과 같습니다.

방법 2: 각 폴링은 이전 요청이 완료되었는지 여부를 결정하고, 다음 요청은 완료된 후에만 실행됩니다(권장)

var isLoaded = false;
function req(opts) {
    $.ajax({
        type: 'get',
        url: 'demo.php',
        dataType: 'json',
        beforeSend: function() {
            if(opts.init === 1) {
                $('.zh-loading').show();
            }
            isLoaded = false;
        },
        success: function(res) {
            console.log(res);
        },
        complete: function() {
            if(opts.init === 1) {
                $('.zh-loading').hide();
            }
            isLoaded = true;
        },
        error: function() {
            console.log('请求失败~');
        }
    });
}
req({"init": 1});
setInterval(function() {
    isLoaded && req({"init": 0});
}, 3000);

위의 isLoaded && req({"init": 0 } );는 이전 조건이 정확하고 && 이후의 메소드가 실행됨을 의미합니다. isLoaded && req({"init": 0}); 表示前面一个条件正确，则执行&&后面的方法

正常的写法是

if(isLoaded) req({"init": 0});

另外注意一点：isLoaded=true

일반적인 작성 방법은

rrreee

입니다. 또 다른 참고 사항: isLoaded=true를 추가해야 합니다. 완료, 성공한 경우에만 Riga의 경우 요청이 실패하면 폴링되지 않고 다시 요청됩니다. 완료는 성공이나 오류에 관계없이 실행됩니다

코드는 여기서 끝납니다. 관심을 가져주셔서 감사합니다~

관련 무료 학습 권장 사항:

javascript🎜(동영상)🎜🎜

위 내용은 Ajax 실시간 새로고침 처리 보러오세요의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!