成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

ajax實(shí)時(shí)刷新處理

Julylovin / 1136人閱讀

摘要：作為一個(gè)老前端，本案例是基于來(lái)寫的。前端渲染頁(yè)面拿數(shù)據(jù)，無(wú)非就是，其他的暫時(shí)沒有用過，但項(xiàng)目還是使用比較多。不管或都會(huì)執(zhí)行代碼就到這里了，

作為一個(gè)老前端，本案例是基于jquery來(lái)寫的。

前端渲染頁(yè)面拿數(shù)據(jù)，無(wú)非就是ajax、socket，其他的暫時(shí)沒有用過，但項(xiàng)目還是使用ajax比較多。

下面來(lái)看一下一個(gè)簡(jiǎn)單基于ajax短輪詢的請(qǐng)求

function req() {
    $.ajax({
        type: "get",
        url: "demo.php",
        dataType: "json",
        success: function(res) {
            console.log(res);
        },
        error: function() {
            console.log("請(qǐng)求失敗~");
        }
    });
}
req();
setInterval(req, 3000);

如果網(wǎng)速快而穩(wěn)定的話，可以這樣使用，但網(wǎng)速誰(shuí)能確定呢，如果網(wǎng)速不穩(wěn)定的話，請(qǐng)求一個(gè)接口需要5~10秒，這樣就會(huì)造成ajax請(qǐng)求堆積，近而引發(fā)不可估量的問題，那么怎樣去避免這個(gè)問題呢？

方式一：給請(qǐng)求賦上一個(gè)變量，然后每次輪詢先abort掉上一個(gè)請(qǐng)求

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("請(qǐng)求失敗~");
        }
    });
}
req(true);
setInterval(function() {
    req(false);
}, 3000);

猛一看，感覺還行，差不多就OK了，但作為前端的我們要不斷的去尋找更合適的方式，所以有個(gè)下面這個(gè)。

方式二：每一次輪詢都判斷上一次請(qǐng)求是否完成，完成了才會(huì)執(zhí)行下一次的請(qǐng)求（推薦）

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("請(qǐng)求失敗~");
        }
    });
}
req({"init": 1});
setInterval(function() {
    isLoaded && req({"init": 0});
}, 3000);

上面的 isLoaded && req({"init": 0}); 表示前面一個(gè)條件正確，則執(zhí)行&&后面的方法

正常的寫法是

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

另外注意一點(diǎn)：isLoaded=true 要在complete里加，如果只在success里加的話， 請(qǐng)求失敗了就不會(huì)輪詢?cè)僬?qǐng)求了。complete不管success或error都會(huì)執(zhí)行

代碼就到這里了，thank you for attention~

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/89263.html

相關(guān)文章

  • php+ajax實(shí)現(xiàn)在線刷新，即時(shí)通訊，無(wú)需mysql數(shù)據(jù)庫(kù)！

    摘要：顯示實(shí)時(shí)刷新的內(nèi)容頁(yè)面。存儲(chǔ)文本數(shù)據(jù)。更新插入數(shù)據(jù)。首先呢，要有發(fā)送請(qǐng)求并顯示遞歸調(diào)用先執(zhí)行一次然后通過和關(guān)聯(lián)起來(lái)。是一個(gè)空文件，你只需要用記事本，新建一個(gè)，用來(lái)存放表單提交過去的數(shù)據(jù)，也就是說，其實(shí)就是一個(gè)數(shù)據(jù)庫(kù)。 也不多，就4個(gè)文件。ajax.html - 顯示實(shí)時(shí)刷新的內(nèi)容頁(yè)面。chat.php - 處理數(shù)據(jù)。data.dat - 存儲(chǔ)文本數(shù)據(jù)。update.php - 更新/插...

    shleyZ 評(píng)論0 收藏0

  • php+ajax實(shí)現(xiàn)在線刷新，即時(shí)通訊，無(wú)需mysql數(shù)據(jù)庫(kù)！

    摘要：顯示實(shí)時(shí)刷新的內(nèi)容頁(yè)面。存儲(chǔ)文本數(shù)據(jù)。更新插入數(shù)據(jù)。首先呢，要有發(fā)送請(qǐng)求并顯示遞歸調(diào)用先執(zhí)行一次然后通過和關(guān)聯(lián)起來(lái)。是一個(gè)空文件，你只需要用記事本，新建一個(gè)，用來(lái)存放表單提交過去的數(shù)據(jù)，也就是說，其實(shí)就是一個(gè)數(shù)據(jù)庫(kù)。 也不多，就4個(gè)文件。ajax.html - 顯示實(shí)時(shí)刷新的內(nèi)容頁(yè)面。chat.php - 處理數(shù)據(jù)。data.dat - 存儲(chǔ)文本數(shù)據(jù)。update.php - 更新/插...

    Crazy_Coder 評(píng)論0 收藏0

  • php+ajax實(shí)現(xiàn)在線刷新，即時(shí)通訊，無(wú)需mysql數(shù)據(jù)庫(kù)！

    摘要：顯示實(shí)時(shí)刷新的內(nèi)容頁(yè)面。存儲(chǔ)文本數(shù)據(jù)。更新插入數(shù)據(jù)。首先呢，要有發(fā)送請(qǐng)求并顯示遞歸調(diào)用先執(zhí)行一次然后通過和關(guān)聯(lián)起來(lái)。是一個(gè)空文件，你只需要用記事本，新建一個(gè)，用來(lái)存放表單提交過去的數(shù)據(jù)，也就是說，其實(shí)就是一個(gè)數(shù)據(jù)庫(kù)。 也不多，就4個(gè)文件。ajax.html - 顯示實(shí)時(shí)刷新的內(nèi)容頁(yè)面。chat.php - 處理數(shù)據(jù)。data.dat - 存儲(chǔ)文本數(shù)據(jù)。update.php - 更新/插...

    BlackMass 評(píng)論0 收藏0

  • ajax基礎(chǔ)知識(shí)

    摘要：各瀏覽器都有自己的關(guān)于最大長(zhǎng)度的限制谷歌火狐超過限制長(zhǎng)度的部分，瀏覽器會(huì)自動(dòng)截取掉，導(dǎo)致傳遞給服務(wù)器的數(shù)據(jù)缺失。 AJAX基礎(chǔ)知識(shí)及核心原理解讀 AJAX基礎(chǔ)知識(shí) 什么是AJAX？async javascript and xml，異步的JS和XML xml：可擴(kuò)展的標(biāo)記語(yǔ)言 作用是用來(lái)存儲(chǔ)數(shù)據(jù)的（通過自己擴(kuò)展的標(biāo)記名稱清晰的展示出數(shù)據(jù)結(jié)構(gòu)）ajax之所以稱為異步的js和xml，主要原因...

    wangshijun 評(píng)論0 收藏0

  • php+ajax開發(fā)手機(jī)在線傳輸文本到電腦

    摘要：掃碼進(jìn)入表單頁(yè)面，然后提交表單，接收頁(yè)面就會(huì)立馬刷新，不用刷新瀏覽器就會(huì)顯示是不是發(fā)現(xiàn)省了很多事，不用登錄微信就可以在線傳輸文本。 我們知道，手機(jī)傳輸本文到電腦比較簡(jiǎn)單的方法是在電腦登錄微信或者QQ，然后發(fā)過去就得了，但是有些人又很懶很懶，懶到連登錄微信和QQ都不想登錄，那么該怎么做呢？ 我開發(fā)這款小工具其實(shí)就可以解決問題，但是目前只支持傳輸文本，圖片視頻那些都還沒開發(fā)。只需要在電腦打...

    CrazyCodes 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<