单击下一页会导致我的页面速度呈指数级下降

clicking next page causes my page to slow down exponentially

这是我第一次在 Stack Overflow 上提问,如有任何帮助,我们将不胜感激。

我有一个显示来自 pixabay api 图片的网站。当我单击按钮时,下一步,将显示下一页图像。问题是每次点击,页面都会以指数速度变慢。我知道这是因为我在每次完成后都添加了一个成功 console.log。

这是之前的图片: Image Link Here.

及之后 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 &copy; 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>

每次调用 getPage 时,都会添加 另一个 $("#pagination2").click 处理程序。这意味着您第一次单击它时,您会执行一个 ajax 请求。第二次你做两个,第三次你做三个,等等。你只需要设置一次点击处理程序,并确保你的逻辑反映了这一点,或者每次都用 $("#pagination2").off('click').click([= 清除旧的13=]