APIリクエスト数を抑えながら無限スクロールでコンテンツ追加を実現する方法
Q&A
Closed
楽天商品検索APIを活用し、商品リストを作成しています。
スクロールの位置が下部1%の範囲に来るたびにページ数を追加取得して
無限スクロールするようなUIを実現したいのですが、今のコードだと
取得したいページ数（100ページ）に達する前に、
APIリクエスト数が上限に達してしまい読み込みエラーになってしまいます。
これを回避しながら無限スクロールでページ（商品表示）を追加していく方法はありませんでしょうか？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/style.css" />
<script src="js/jquery-2.1.3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
<div class="cssgrid"> </div>
<script>
// ------------------
// グローバル変数
// ------------------
let APPID = "-------アプリID--------"; //アプリID *必須
let MAX_PAGE = 100; //最大取得ページ件数
let HITS = 30; //1ページ当たりの表示件数
let KEYWORD = encodeURIComponent("カラコン"); //絞り込みしたい単語
// ------------------
// 楽天API
// ------------------
$(function () {
//ページ数を変数化
let n = 1;
//下部までスクロールすると次のページの商品を追加
$(window).bind("scroll", function () {
scrollHeight = $(document).height();
scrollPosition = $(window).height() + $(window).scrollTop();
if ((scrollHeight - scrollPosition) / scrollHeight <= 0.01) {
//スクロールの位置が下部1%の範囲に来た場合ページ数を追加
if (n < MAX_PAGE) {
search_rakuten(n+1);
}
}
});
//ループで表示したいHTML部分を作成
function put_item(item) {
let h = '<div>'
+ '<img src="'
+ item.mediumImageUrls[0].imageUrl.replace("?_ex=128x128","")
+ '" class="img">'
+ '<span><a href="'
+ item.affiliateUrl
+ '" target="_blank">●</a></span></div>';
$(".cssgrid").append(h);
}
//ajax
function search_rakuten(page) {
$.ajax({
url:
"https://app.rakuten.co.jp/services/api/IchibaItem/Search/20170706?format=json&applicationId=" +
APPID +
"&keyword=" +
KEYWORD +
"&page=" +
page +
"&hits=" +
HITS,
type: "get",
dataType: "json",
timeout: 10000,
async: "true",
})
//読み込み成功時の処理
.done(function (data) {
// 1商品ずつhtml置く
for (let i in data.Items) {
put_item(data.Items[i].Item);
}
})
//読み込み失敗時の処理
.fail(function (data) {
console.log("読み込みエラー");
});
}
search_rakuten(n);
});
</script>
</body>
</html>
0
