javascript - 函数在用作另一个函数中的回调函数之前不会完全初始化

Question

我正在使用 jQuery 和本地存储制作购物车，并且遇到了一个正在发生的问题。

我创建了一个函数renderCart()，我想在每次页面重新加载时显示它，但是如果我在 document.ready 函数中初始化它，它不会执行代码，但是如果我创建一个按钮 #show-cart 并将我的 renderCart() 函数传递给它，那么在单击它后我将看到渲染的购物车。

你知道为什么我的代码在重新加载页面时不会初始化以及如何让它工作吗？

'use strict'

const products = [{
    "id": 0,
    "name": "Bamboo Tootbrush",
    "price": 9.99,
    "description": "This is a description of the item that you are about to buy. It is eco-friendly and buy buying this product you are helping the environment and the planet..",
    "url": "css/img/item1.jpg",
    "sale": true,
    "category": "bathroom"
  },
  {
    "id": 1,
    "name": "Bamboo Dental Floss",
    "price": 10.99,
    "description": "This is a description of the item that you are about to buy. It is eco-friendly and buy buying this product you are helping the environment and the planet.",
    "url": "css/img/item2.jpg",
    "sale": false,
    "category": "bathroom"
  },
  {
    "id": 2,
    "name": "Bamboo Swabs",
    "price": 8.99,
    "description": "This is a description of the item that you are about to buy. It is eco-friendly and buy buying this product you are helping the environment and the planet.",
    "url": "css/img/item3.jpg",
    "sale": true,
    "category": "bathroom"
  },
  {
    "id": 3,
    "name": "Eco-friendly Straws",
    "price": 12.99,
    "description": "This is a description of the item that you are about to buy. It is eco-friendly and buy buying this product you are helping the environment and the planet.",
    "url": "css/img/item4.jpg",
    "sale": true,
    "category": "kitchen"
  },
  {
    "id": 4,
    "name": "Set of 3 produce bags",
    "price": 11.99,
    "description": "This is a description of the item that you are about to buy. It is eco-friendly and buy buying this product you are helping the environment and the planet.",
    "url": "css/img/item5.jpg",
    "sale": false,
    "category": "kitchen"
  },
  {
    "id": 5,
    "name": "MESH produce bags",
    "price": 11.99,
    "description": "This is a description of the item that you are about to buy. It is eco-friendly and buy buying this product you are helping the environment and the planet.",
    "url": "css/img/item6.jpg",
    "sale": false,
    "category": "kitchen"
  },
  {
    "id": 6,
    "name": "Straws",
    "price": 11.99,
    "description": "This is a description of the item that you are about to buy. It is eco-friendly and buy buying this product you are helping the environment and the planet.",
    "url": "css/img/item7.jpg",
    "sale": false,
    "category": "kitchen"
  },
  {
    "id": 7,
    "name": "Tootbrush ECOholic",
    "price": 11.99,
    "description": "This is a description of the item that you are about to buy. It is eco-friendly and buy buying this product you are helping the environment and the planet.",
    "url": "css/img/item8.jpg",
    "sale": false,
    "category": "bathroom"
  }
]

$(document).ready(function() {

  //Nacitanie navigacie a footeru na vsetkych strankach
  $('.menu').load('http://127.0.0.1:5500/ITvKurze-Projekt/menu.html');
  $('footer').load('http://127.0.0.1:5500/ITvKurze-Projekt/footer.html');

  showFavProduct();
  showProduct();
  filter();
  addToCart();

  renderCart(); //this wont render

  //this below will
  $('#show-cart').click(function showCart() {
    renderCart();
  });

  addCartInfoToCartList();
  cartCount();

  for (let i = 0; i < products.length; i++) {
    console.log(products[i]);
  }


  $('.clear-btn').click(function clearCartbutton() {
    clearCart();
  });

  function addToCart() {
    $('.add-btn').on("click", function(e) {

      let productID = e.target.attributes.productid.value
      let actualCart = localStorage.getItem('productsID');

      if (actualCart == null) {
        actualCart = [];
      } else {
        actualCart = JSON.parse(actualCart);
      }

      actualCart.push(productID);
      localStorage.setItem('productsID', JSON.stringify(actualCart));

      console.log(`Just added product to cart with ID: ${ productID }`);
      cartCount();
      console.log(JSON.stringify(actualCart));
      renderCart();
    });
  };

  function addCartInfoToCartList() {
    for (let i = 0; i < products.length; i++) {
      products[i].qty = undefined;
    }

    let actualCart = localStorage.getItem('productsID');

    if (actualCart === null) {
      actualCart = [];
    } else {
      actualCart = JSON.parse(actualCart);
    }

    for (let i = 0; i < actualCart.length; i++) {
      let productPosition = actualCart[i];

      if (products[productPosition].qty === undefined) {
        products[productPosition].qty = 1;
      } else {
        products[productPosition].qty++;
      }
    }
  }

  function cartCount() {
    let cartLength;
    if (!localStorage.getItem('productsID')) {
      cartLength = [];
      console.log('Your cart is empty');
      $('.cart').text(`(0)`);
      // !!!!! neviem preco mi nefunguje pri prvom inicializovani riadok vyssie !!!!
    } else {
      cartLength = localStorage.getItem('productsID');
      let cartCount = JSON.parse(cartLength).length;
      console.log(`Number of products in cart: ${ cartCount }.`);
      $('.cart').text(`(${ cartCount })`);
    }
  };

  function clearCart() {
    localStorage.clear();

    for (let i = 0; i < products.length; i++) {
      products[i].qty = undefined;
    }
    $('.cart-container').empty();
    console.log('Your cart is empty');
  };
  //ZOBRAZENIE PRODUKTOV V CART ELEMENTE
  function renderCart() {
    for (let i of products) {
      if (i.qty !== undefined) {
        let productDiv = `<div class="fav-wrap ${i.category}">`;
        productDiv += `<img class="fav" src="${i.url}">`;
        productDiv += `<div class="name">${ i.name }</div>`;
        productDiv += `<div>Price: ${ i.price } EUR</div>`
        productDiv += `<div class="add-btn" productid="${ i.id }">ADD TO CART</div>`;
        productDiv += '</div>';

        $('.cart-container').append(productDiv);
      };
    };
  };

  //Zobrazenie akciovych produktov na index.html v sekcii Our Favourites
  function showFavProduct() {
    for (let i of products) {
      if (i.sale === true) {
        let productDiv = `<div class="fav-wrap ${i.category}">`;
        productDiv += `<img class="fav" src="${i.url}">`;
        productDiv += `<div class="name">${ i.name }</div>`;
        productDiv += `<div>Price: ${ i.price } EUR</div>`
        productDiv += `<div class="add-btn" productid="${ i.id }">ADD TO CART</div>`;
        productDiv += '</div>';

        $('#fav-products').append(productDiv);
      }
    }
  }

  //Zobrazenie vsetkych produktov na SHOP.html
  function showProduct() {

    for (let i of products) {

      let productDiv = `<div class="fav-wrap ${i.category}">`;
      productDiv += `<img class="fav" src="${i.url}">`;
      productDiv += `<div class="name">${ i.name }</div>`;
      productDiv += `<div>Price: ${ i.price } EUR</div>`
      productDiv += `<div class="add-btn" productid="${ i.id }">ADD TO CART</div>`;
      productDiv += '</div>';

      $('#all-products').append(productDiv);
    }
  }

  //Vyber kategorie v SHOPE
  function filter() {
    $('#all').click(function() {
      $(".kitchen, .bathroom").show();
      $(this).addClass("selected");
      $("#cat-kitchen, #cat-bath").removeClass("selected");
    });

    $('#cat-kitchen').click(function() {
      $(".bathroom").hide();
      $(".kitchen").show();
      $("#all, #cat-bath").removeClass("selected");
      $(this).addClass("selected");
    });

    $('#cat-bath').click(function() {
      $(".kitchen").hide();
      $(".bathroom").show();
      $("#all, #cat-kitchen").removeClass("selected");
      $(this).addClass("selected")
    });
  }
});

我希望在重新加载页面后立即看到我存储在本地存储中的实际购物车，这样我就不必每次都单击“显示购物车”按钮。

Answer 1

您的代码确实运行并且您的函数确实执行。

但它只包含一个带有 if (i.qty !== undefined) 的循环。

事实上，您的对象在开始时都不包含 qty，因此循环不执行任何操作。它做了它应该做的事情。

// No "qty" anywhere.
{ 
      "id": 1,
      "name": "Bamboo Dental Floss",
      "price": 10.99,
      "description": "This is a description of the item that you are about to buy. It is eco-friendly and buy buying this product you are helping the environment and the planet.",
      "url": "css/img/item2.jpg",
      "sale": false,
      "category": "bathroom"
}