更改网站页面时出现问题，而不是 1,2,3,4,5，而是 1,2,4,8,16

Question

我正在制作一个可以在页面之间切换的选项的网站。但问题来了。函数正常工作，但是当我想在获取 API 的函数内部调用时，每次点击的页面都会翻倍。它不是 1,2,3,4,5，而是 1,2,4,8,16...等等。我该如何解决这个问题？

let page = 1
async function getData(url) {
    const res = await fetch(url + page);
    const data = await res.json();
    const results = data.results;
    showList(results);
    
    pageBtns.forEach((btn) => {
        btn.addEventListener('click', () => changePage(url, btn));
    });
}

function changePage(url, btn) {
    if (btn.classList.contains('next-btn')) {
        document.querySelector('.prev-btn').classList.add('prev-btn--active');
        page++;
        if (page === 5) {
            btn.classList.remove('next-btn--active');
        }
    } else {
        document.querySelector('.next-btn').classList.add('next-btn--active');
        page--;
        if (page === 1) {
            btn.classList.remove('prev-btn--active');
        }
    }
    getData(url)
    console.log(page);
}

我尝试调用changePage函数而不调用内部的getData并且它工作正常。

Answer 1

您遇到的问题是由于每次调用 getData 时，它都会向所有 pageBtns 添加新的单击事件侦听器，而不删除以前的侦听器。这会导致事件侦听器堆积并导致回调函数针对单次单击执行多次，因此页码会加倍而不是增加一。

要解决此问题，您需要确保每个按钮在任何时候都只附加一个事件侦听器。

解决方案

let listenersAdded = false;

async function getData(url) {
    const res = await fetch(url + page);
    const data = await res.json();
    const results = data.results;
    showList(results);

    if (!listenersAdded) {
        pageBtns.forEach((btn) => {
            btn.addEventListener('click', () => changePage(url, btn));
        });
        listenersAdded = true; // Set the flag so this block won't run again
    }

}