这是我第一次在Stack Overflow上提问，任何帮助都会非常感激。
我有一个显示pixabay api图像的网站。当我单击按钮时，接下来，将显示下一页图像。问题是，每次点击，页面都会以指数速率减慢速度。我知道这是因为我在每次完成后都添加了一个成功的console.log。
这是之前的图片： Image Link Here
我认为这个问题与.getJSON调用和调用中的for循环有关，但是我已经能够弄清楚了。
这是Javascript和HTML
/*
Pixabay api key:
*/
$(document).ready(function () {
var searchValue = "rice"
var defaultPage = 1;
returnPhotos(searchValue, defaultPage);
$("#searchForm").on("submit", function (event) {
//obtain value from user input
searchValue = $("#searchText").val();
returnPhotos(searchValue, defaultPage);
//stops form from submitting to a file
event.preventDefault();
});
});
/*
1. Return Photos from pixabey API
*/
function returnPhotos(searchValue, pageNum) {
let key = "8712269-5b0ee0617ceeb0fd2f84487c3";
let startURL = "https://pixabay.com/api/?key=" + key;
let page = "&page=" + pageNum;
let imagesPerPage = "&per_page=" + 22
let addWH = "&min_width&min_height";
let safeSearch = "&safesearch=true";
let endingURL = "&q=" + searchValue + page + addWH + safeSearch + imagesPerPage;
// activate api and get data
$.getJSON(startURL + endingURL, function (data) {
let image = data.hits;
var imageLength = image.length;
arrayLength = image.length;
if (data) {
let output = ""
for (let x = 0; x < arrayLength; x++) {
//imageObject contains information on each image passed through the array
let imageObject = {
// id: image[x].id,
// pageURL: image[x].pageURL,
// tags: image[x].tags,
// previewURL: image[x].previewURL,
// previewWidth: image[x].previewWidth,
// previewHeight: image[x].previewHeight,
// webformatURL: image[x].webformatURL,
// webformatWidth: image[x].webformatWidth,
// webformatHeight: image[x].webformatHeight,
largeImageURL: image[x].largeImageURL,
// fullHDURL: image[x].fullHDURL,
// views: image[x].views,
// user_id: image[x].user_id,
// user: image[x].user,
// userImageURL: image[x].userImageURL
}
// output this template to the website
output += `
<div class="brick">
<img src="${imageObject.largeImageURL}">
</div>
`
}
$(".masonry").imagesLoaded(function () {
localStorage.clear();
$(".masonry").html(output);
});
console.log("success");
} else {
console.log("Didn't work");
}
getPage(searchValue, pageNum, arrayLength);
// console.log(arrayLength);
});
}
/*
2. INCREASE/Decrease PAGE
*/
function getPage(searchValue, defaultPage, max) {
if (defaultPage <= max + 1) {
$("#pagination2").click(function () {
if (defaultPage <= max) {
defaultPage++;
returnPhotos(searchValue, defaultPage);
console.log(1);
}
$(".pageNumber").html("Page " + defaultPage);
console.log("This is the default page:", defaultPage);
});
}
$("#pagination1").click(function () {
if (defaultPage != 1) {
defaultPage--;
returnPhotos(searchValue, defaultPage);
console.log(1);
}
$(".pageNumber").html("Page " + defaultPage);
console.log("This is the default page:", defaultPage);
});
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv='cache-control' content='no-cache'>
<title>Photo Gallery</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="vendors/css/ionicons.min.css">
<link rel="stylesheet" type="text/css" href="vendors/css/animate.min.css">
<link rel="stylesheet" href="resources/css/style.css">
<link href="data:image/x-icon;base64,AAABAAEAICAAAAEAIACoEAAAFgAAACgAAAAgAAAAQAAAAAEAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+4z/L/pMLv//j6/f///////v7//6vG8P+lwu//5u76/3ek5/+70fP///////7+/v+wyvH/daLn/9Hg9////////////////////////////////////////////////////////////////////////////////////////////1SM4f8kbNn/8PX8///////H2vX/CFnU/4yy6v/W4/j/ClvU/4St6f//////y9z2/xVi1v9QiuD/9Pf9////////////////////////////////////////////////////////////////////////////////////////////VIzh/yRs2f/w9fz/9Pf9/z9+3f9Egd7/8/f9/9bj+P8KW9T/hK3p/+7z+/8ob9n/LXLa//D0/P////////////////////////////////////////////////////////////////////////////////////////////////9UjOH/JGzZ/87e9v+Bqun/CVrU/8zc9v//////1uP4/wpb1P9+qej/ZZfk/xdj1v/J2/X//////////////////////////////////////////////////////////////////////////////////////////////////////1SM4f8kbNn/jrPr/zB02/8RX9X/e6bo//X4/f/W4/j/ClvU/2+e5v8faNj/oL/u////////////////////////////////////////////////////////////////////////////////////////////////////////////VIzh/yRs2f/w9fz/+vz+/6zH8P8EVtP/p8Tv/9bj+P8KW9T/cqDm/yRs2f9ek+P/+fv+//////////////////////////////////////////////////////////////////////////////////////////////////////9UjOH/JGzZ//D1/P///////v7//xJf1f9vnuX/1uP4/wpb1P+ErOn/nb3t/wdY1P+cvO3//v7//////////////////////////////////////////////////////////////////////////////////////////////////1SM4f8kbNn/8PX8//7+///J2/X/BFbT/5G17P/W4/j/ClvU/4St6f/5+/7/RoLe/xZi1v/e6fn/////////////////////////////////////////////////////////////////////////////////////////////////VIzh/yRs2f+au+3/RYLe/xdj1v9bkeL/7/T8/9bk+P8MXNX/ha3q///////W4/f/GmXX/0iE3//1+P3///////////////////////////////////////////////////////////////////////////////////////////+70fP/p8Tv/8fZ9f+jwe//xtn1/8nMz/+Ojo7/vcDG/77S8v/f6fn///////7+/v/P3/b/wNT0//T4/f/////////////////////////////////////////////////////////////////////////////////////////////////////////////////39/f/aWlp/9jY2P9ycnL/29vb/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////v7+/9LS0v/CwsL/9/f3//r6+v9oaGj/vr6+/2xsbP/f39//7Ozs/729vf/j4+P//v7+//////////////////////////////////////////////////////////////////////////////////////////////////////+7u7v/f39//6CgoP+JiYn//v7+/+Hh4f+pqan/29vb//n5+f9mZmb/qqqq/2xsbP/h4eH//////////////////////////////////////////////////////////////////////////////////////////////////////6urq/+ampr/0NDQ/3d3d//9/f3/rMfw/9nl+P+zzPH/9vb2/2RkZP/c3Nz/eXl5/9jY2P//////////////////////////////////////////////////////////////////////////////////////////////////////9/f3/5mZmf+Li4v/5OTk/+Hr+f+Msuv/ydv1/42y6//u9Pz/ysrK/4aGhv+0tLT//Pz8/////////////////////////////////////////////////////////////////////////////////////////////////////////////Pz8//j4+P/4+v3/XJHi/+Xt+v//////irHq/7nQ8//+/v7/9fX1//7+/v///////////////////////////////////////////////////////////////////////////////////////////////////////////9nZ2f9ra2v/b29v/7e3t//k7fr/bp3l/6C/7v+xyvH//Pz8/42Njf91dXX/eHh4//Dw8P//////////////////////////////////////////////////////////////////////////////////////////////////////o6Oj/7a2tv/t7e3/bW1t//b4/P/U4vf/4Or5/+nw+//z8/P/ZmZm//b29v+FhYX/09PT///////////////////////////////////////////////////////////////////////////////////////////////////////g4OD/eXl5/3l5ef+/v7///Pz8/6Kiov+FhYX/vr6+//39/f+Xl5f/gYGB/4WFhf/z8/P////////////////////////////////////////////////////////////////////////////////////////////////////////////4+Pj/9PT0///////Ozs7/hoaG/97e3v9tbW3/6+vr//39/f/w8PD//f39/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+fn5/9vb2//mpqa/3d3d//09PT//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+Dg4P/IyMj/7e3t////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA="
rel="icon" type="image/x-icon" />
</head>
<body>
<div class="container">
<nav class="nav">
<h1>
<a class="brand-logo" href="index.html">Photo Gallery</a>
</h1>
</nav>
<!-- IMAGE search box-->
<div class="header">
<div>
<h3 class="text-center">Search For Any Image</h3>
<form id="searchForm" autocomplete="off">
<input type="text" class="form-control" id="searchText" placeholder="Search Image Here">
</form>
<h4 class="from-pixabay">Images from Pixabay</h4>
</div>
<div class="paginations">
<a href="#" id="pagination1">Previous</a>
<p class="pageNumber">Page 1</p>
<a href="#" id="pagination2">Next</a>
</div>
</div>
<!-- IMAGES GO HERE -->
<div class="masonry">
</div>
</div>
<!-- Pre-footer -->
<!--SECTION Contact-Footer -->
<footer class="footer-section" id="contact">
<div class="rows-container">
<div class="footer-con">
<div class="homepage-link">
<a href="http://rkdevelopment.org" target="_blank">
<h3>Rkdevelopment.org</h3>
</a>
</div>
<ul class="social-list center">
<li>
<a href="https://github.com/RexfordK" target="_blank">
<i class="ion-social-github"></i>
</a>
</li>
<li>
<a href="https://www.linkedin.com/in/rexford-koduah" target="_blank">
<i class="ion-social-linkedin"></i>
</a>
</li>
<li>
<a href="https://www.freecodecamp.org/rexfordk" target="_blank">
<i class="ion-fireball"></i>
</a>
</li>
</ul>
<p>Copyright © 2018 by Rexford Koduah. All rights reserved.</p>
</div>
</div>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
<script src="resources/js/main.js"></script>
</body>
</html>
答案 0 :(得分：0)
每次致电getPage时，您都会添加另一个 $("#pagination2").click处理程序。这意味着第一次单击它时，您会执行一个ajax请求。第二次你做两次，第三次你做三次，等等。你需要只设置一次点击处理程序，并确保你的逻辑反映出来，或者每次用$("#pagination2").off('click').click(清除旧的那个