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

Posted 2023-05-09

【中文标题】在用作另一个函数中的回调函数之前，函数不会完全初始化

【英文标题】：Function won't completely initialize until used as a callback function in another function

【发布时间】：2020-01-07 08:45:01

【问题描述】：

我正在使用 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")
    );
  
);

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

【问题讨论】：

页面加载时是否存在$('.cart-container')，或者您在不同的地方将其添加到ajax？ products 变量从何而来？它是从 ajax 调用返回的吗？

是的，.cart-container 存在于我的 html.file 中，我现在已经在我的 script.js 文件的顶部写入了我的变量 products。 @jcubic

你能把你的整个代码放进去吗（在问题里面）？

如果你 console.log(products) 怎么办？你确定它的价值吗？控制台有错误吗？

刚刚编辑了整个代码@jcubic

【参考方案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"
 

【讨论】：

谢谢，它帮助我更好地理解它并且我找到了解决方案。

【参考方案2】：

我现在明白了。

我的 addCartInfoToCartList(); 从 LocalStorage 更新我的产品在我的 renderCart() 之后被初始化（它也更新了数量）。我已经改变了顺序。

现在可以了。