Сбой браузера после добавления асинхронных функций в файл Javascript. Как исправить?

Question

Я создал простое приложение для интернет-магазина, используя класс ES6 vanilla javascript. Объекты товаров в магазине хранятся в файле JSON. Я использовал этот файл для загрузки элементов в пользовательский интерфейс.

Для создания функций «addToCart :,« amountChange »и« DeleteFromCart »я намерен использовать асинхронную c функцию обратного вызова« find () » Я создал, который принимает имя Id, ищет его в файле JSON и возвращает объект:

find(x, itemFunction, target) {
        //x is the item id to search for
        //itemFunction, function to use the item found
    const xhr = new XMLHttpRequest();
    xhr.open('GET', 'shop.json', true);
        
        xhr.onload = function(){
            if(this.status === 200){
                const itemsArray = JSON.parse(this.responseText);
                for(let i = 0; i < itemsArray.length;  i++){
                    if(itemsArray[i].id == x){
                        itemFunction(itemsArray[i], target)
                    }
                }
            }
        }
        xhr.send();
    }

Функция «AddToCart» работает нормально, но когда я создал функцию «DeleteFromCart» - аналогичным образом - в моем браузере, мой компьютер продолжал давать сбой. Ни одна из функций не работает. Даже пользовательский интерфейс, созданный из JSON, не загружается.

 deleteItem(target) {
        if (target.classList.contains('delete')){
            
            target.parentElement.parentElement.remove();

            let id = target.classList[1];

            this.find(id, this.deleteTheItem, target)
        }
    }
    
 deleteTheItem(item, target){
        Store.remove(item)
        //delete from localStorage
   }

Возможно, ошибка в другом месте? NB: Не знаю Jquery. Заранее спасибо!! :)

Я еще новичок во всем этом. Возможно, это поможет прояснить ситуацию, вот ссылка на мое репо; https://github.com/HafseeMan/online-shop/tree/master/js

Answer 1

• 1000 1004 *

Таким образом, он всегда будет проходить и запускать то, что внутри.

EDIT: попробуйте улучшить приведенный выше код следующим образом:

let item = itemsArray.find((el) => el.id === x);
if(item) itemFunction(item, target);

А затем в https://github.com/HafseeMan/online-shop/blob/master/js/store.js отредактируйте removeItem и измените этот foreach на этот:

store_items = store_items.filter((el) => el.id !== id);

Одно дополнительное предложение состоит в том, что, поскольку removeItem фактически использует только itemId, вы можете передать только это методу removeItem, так что то, что я написал выше, будет Лучше всего изменить это:

let item = itemsArray.find((el) => el.id === x);
if(item) itemFunction(item.id, target);

И ваш removeItem вот так:

static removeItem(itemId){

    const store_items = Store.getItems();
    store_items = store_items.filter((item) => item.id === itemId);

    localStorage.setItem('store_items', JSON.stringify(store_items));
}

Обратите внимание, что я удалил параметр target, поскольку ничего не делает. Так что вы также можете удалить его из следующих элементов:

//from this
this.find(id, this.deleteTheItem);
//and this
find(x, itemFunction) {...
//aaand this
itemFunction(item.id, target);
//and also this
deleteTheItem(item, target);

Попробуйте, обновите и сообщите мне, станет ли оно лучше :)

Надеюсь, это проясняет проблему. Дайте мне знать, если не так, скажите мне, чтобы я ответил на ваши сомнения.