2

Estou fazendo um trabalho de faculdade, no qual se trata de um e-commerce. E tenho uma dúvida referente a seguinte questão, eu preciso chamar uma função apenas após o carregamento de alguns arquivos JSON que tenho em meu projeto. Preciso fazer isso, pelo fato de que estou fazendo um carrossel de produtos, e esse carrossel só poderá ser construído, quando eu carregar dinamicamente todos os meus produtos.

Abaixo está as funções que precisam ser feitas antes de executar o carrossel:

  • Função genérica, para evitar chamar muitas funções.

    function loadProdutos() {
        findJogosPs4();
        findJogosXbox();
        findJogosNintendo();
    }
    
  • Essa função abaixo é semelhantes as demais que estou chamando no 'load produtos':

    function findJogosPs4() {
        let produtosPs4 = new Array();
        $.getJSON('repository/produtosPs4.json', function (data) {
        data.jogosPs4.forEach(function (jogo) {
            newProduto = new Produto(
                jogo.id,
                jogo.nome,
                jogo.preco,
                jogo.caminhoCapa,
                jogo.qtdeParcelas,
                jogo.descontoAvista);
            produtosPs4.push(newProduto);
        });
        montaJogos(produtosPs4, '#gamePs');
        });
     }
    

    E esse é o carroussel que preciso chamar após buscar todos os produtos:

    function carrossel() {
    $('.jogos').slick({
        dots: true,
        speed: 600,
        autoplaySpeed: 2500,
        autoplay: false,
        slidesToShow: 4,
        slidesToScroll: 4,
        responsive: [
            {
                breakpoint: 1024,
                settings: {
                    slidesToShow: 3,
                    slidesToScroll: 3,
                    dots: true
                }
            },
            {
                breakpoint: 760,
                settings: {
                    slidesToShow: 2,
                    slidesToScroll: 1,
                    dots: false
                }
            },
            {
                breakpoint: 480,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1,
                    dots: false
                }
            }
        ]
    });
    }
    

1 Resposta 1

0

Você pode utilizar a método .done() do Jquery para fazer isso, ele irá fazer algo quando finalizar o processamento do Json, pelo que vi no seu código ele ficaria assim.

function findJogosPs4() {
 let produtosPs4 = new Array();
 $.getJSON('repository/produtosPs4.json', function (data) {
 data.jogosPs4.forEach(function (jogo) {
    newProduto = new Produto(
        jogo.id,
        jogo.nome,
        jogo.preco,
        jogo.caminhoCapa,
        jogo.qtdeParcelas,
        jogo.descontoAvista);
    produtosPs4.push(newProduto);
 })
  montaJogos(produtosPs4, '#gamePs');
 }).done(function(){
    carrossel();
 });
}

Aqui você pode ver como funciona melhor os outros métodos. https://api.jquery.com/jquery.getjson/

1
  • 1
    Valeu cara, eu tinha visto esse método .done() em alguns sites, porém não sabia como aplicar da forma certa. O único problema que deu é que se eu chamar em todos as minhas funções, a biblioteca que estou utilizando para o carrousel, dispara um erro. Entretanto coloquei apenas na última função de busca que faço, e funcionou perfeitamente. Obrigado! Commented 17/05/2019 às 14:23

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .