Функция запускается дважды после первой активации

Question

Хорошо, я работаю над программой, которая, когда я нажимаю кнопку в функции getNumber. ArrayAPI создает массив при извлечении из API, а затем на основе этого API создает группу делений с одним числом в нем.

Я надеялся создать таблицу.

Оригинальный div сделан ".dogTable"

Затем он проходит через al oop. Сначала l oop создает еще один div "dogRowX", затем добавляет элемент

к этому div. До пяти на строку, прежде чем создавать новую строку.

Это работает один раз, но по какой-то причине каждый раз после этого функция arrayAPI запускается несколько раз. Во второй раз я активирую getNumber (), arrayAPI () запускается дважды. В третий раз он работает 4 раза. Четвертый раз, 8.

Я понятия не имею, почему это удваивается, как это.

function readyFunctions(){
    console.log("readyFuntions ran")
    let dogNumber = 1;
    getNumber();
}

async function getNumber(){
    console.log("getNumber ran")
    await $('.getDogs').on('click', '.puppyButton', function(event){
        event.preventDefault();
        $('.dogDisplay').empty();
        console.log("Display emptied");
        dogNumber = $('.puppyNumber').val();
        console.log("dogNumber is: " + dogNumber);

        arrayAPI();
    })
}

async function arrayAPI(){
    console.log("arrayAPI ran");

    let dogPool = [];
    for (i=0; i<dogNumber; i++){
        await fetch('https://dog.ceo/api/breeds/image/random')
        .then(response => response.json())
        .then(responseJSON => dogPool.push(responseJSON))
        .catch(error => alert('error! danger!'));
    }

    console.log(dogPool);
    console.log("length of dogpool: " + dogPool.length);

    $('.dogDisplay').append(
        "<div class='dogTable'></div>"
    );

    let rowNumber = 0;
    const rowLimit = 5; 

    for (i=0; i<dogPool.length; i++){
            if (i%5 == 0){
                console.log("making row " + rowNumber);
            $('.dogTable').append(
                "<div class='dogLine dogRow" + rowNumber + "'></div>"
            );

                rowName = ".dogRow" + rowNumber;
                rowNumber++;
            }
            $(rowName).append(
                "<p>"+ i + "</p>"
            );
        }


    readyFunctions();
}

$(readyFunctions);

Answer 1

Причина, по которой он запускается несколько раз, заключается в том, что вы просто связываете событие 'click' с элементом (ами) с классом getDogs! Когда вы связываете прослушиватель событий с помощью jQuery, (* в данном случае $('.getDogs').on('click', 'puppyButton', ...) , он не перезаписывает предыдущий прослушиватель событий, а связывает новый прослушиватель, сохраняя предыдущие. Другими словами, каждый раз, когда вы щелкаете элемент .getDogs .puppyButton, он добавляет новый слушатель click для каждого предыдущего слушателя, поэтому код повторяется несколько раз!

Чтобы исправить его, вы должны отменить привязку предыдущий слушатель (вы можете сделать это с помощью jQuery s. unbinder для события *) , то есть:

async function getNumber() {
    var $getDogs = $('.getDogs');

    console.log('getNumber ran');

    // unbind (remove) the previous 'click' listener, if any
    $getDogs.off('click.get-number');

    // binds the new onclick listener
    await $getDogs.on('click.get-number', '.puppyButton', function (event) {
        event.preventDefault();
        $('.dogDisplay').empty();
        console.log("Display emptied");
        dogNumber = $('.puppyNumber').val();
        console.log('dogNumber is: ' + dogNumber);

        arrayAPI();
    });
}

Обратите внимание, что я добавил event.namespace к событию 'click', таким образом вы гарантируете, что удаляете только этот указанный c прослушиватель событий, оставляя другие события 'click' привязанными к элементу .getDogs ) все еще работает!

Другой вариант - гарантировать, что вы связываете событие onclick только при первом запуске кода.