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>