Очередь предстоящих событий в jquery

279

12 мая 2017, 16:19

У меня должна сначала выполниться библиотека magnificPopup:

$('#block').on('click', function() { 
  $.when( 
    $.magnificPopup.open({ 
      items: { 
        src: 'https://dimsemenov.com/plugins/magnific-popup/', 
        type: 'ajax' 
      } 
    }) 
  ).then(function() { 
    alert('Вот пример того, что запускается сначала alert, а только потом открывается модальное окно'); 
    $('.span').addClass('speed-in'); 
  }); 
});

.span { 
  color: #000; 
} 
 
.speed-in { 
  color: #eee; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://rawgit.com/dimsemenov/Magnific-Popup/master/dist/jquery.magnific-popup.js"></script> 
<link href="https://raw.githubusercontent.com/dimsemenov/Magnific-Popup/master/dist/magnific-popup.css" rel="stylesheet" /> 
<a href="#" id="block">Нажмите</a><br/> 
<span class="span">Меняет цвет</span>

Вообщем у меня должно выполняться сначала открытие информации с другой страницы в модальном окне (в примере кода, сайт не откроется), а затем только надо выполнить добавление класса к span. Так как по идее этот span будет находиться, как раз на другой странице, которую вызываю в модальном окне.

Как мне определить очередность выполнения, подскажите, пожалуйста, уважаемые эксперты?

Answer 1

Я не уверен, то ли это, что вам нужно, но у этого плагина есть коллбэки: http://dimsemenov.com/plugins/magnific-popup/documentation.html#api

С их помощью можно вызывать различные события в различные моменты, в том числе и после того, как попап открылся.

Выгляди это так:

$('#block').on('click', function() {
  $.magnificPopup.open({
      items: {
        src: 'https://dimsemenov.com/plugins/magnific-popup/',
        type: 'ajax'
      },
      callbacks: {
        open: function()  {
          $('.span').addClass('speed-in');
        }
      }
    });
});