ajax多次請求,只執行最后一次的方法


ajax多次請求,只執行最后一次的方法

有時候點擊按鈕進行異步請求數據的時候可能網絡差,用戶會點擊很多次,或者頁面有很多相同的按鈕,參數不同,但是調用的ajax相同,只想得到最后一次結果

我的思路是用閉包記錄執行次數,並同時記錄發起ajax的次數,等數據返回的時候比較兩次次數的結果,渲染最后一次數據

多說無益,上代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">

    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <title>Title</title>
</head>
<body>
<button id="ajaxbtn">獲取數據</button>
點擊次數<span id="num"></span>
<div id="show">

</div>

<script>
    //定義點擊次數和方法執行次數
    var a = 1;
    var flag = 1;
    $('#ajaxbtn').click(function () {
        a = a + 1
        $('#num').html(a)
        console.log(a);
        btnAjax('https://api.douban.com/v2/movie/in_theaters', cb);
    })
//封裝ajax事件
    function btnAjax(url, cb) {

        $.ajax({
            type: 'get',
            url: url,
            dataType: 'jsonp',
            success: function (data) {
                var func = callbackFunc(data, cb);
                func()
            }
        })
    }
    //返回函數
    function cb(data) {
        console.log(a);
        console.log(data);
        var str = '';
        for (var i = 0; i < data.subjects.length; i++) {
            str += '<img src="' + data.subjects[i].images.small + '">';
        }
        $('#show').html(str)
    }
    //判斷次數,獲取返回函數
    function callbackFunc(data, cb) {
        flag++;
        if (a == flag) {
            return function () {
                cb(data);
            }
        } else {
            return function () {
            }
        }
    }
</script>
</body>
</html>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM