Как дождаться выполнения события (анимации), чтобы запустить следующее

@Eskander88 · Регистрация: 02.11.2015

Author24 — интернет-сервис помощи студентам

Доброго времени суток!

Столкнулся с такой проблемой. Делаю скрипт к html-шаблону. Есть фрагмент в коде <div id="target" ...>. Необходимо сделать плавный скроллинг к нему по клику на ссылку <a href="#target">.

Проблема в том, что на этом клике висит ещё одно событие, которое скрывает некоторые элементы со страницы. Из-за этого положение координат целевого элемента смещается.

Каким образом добавить мой скрипт в очередь выполнения функций(событий), чтобы получить координаты для скроллинга после того как ранее установленные скрипты закончат скрытие элементов?

PHP/HTML

<!DOCTYPE HTML>
<html lang="ru-RU">
<head><title></title><meta charset="UTF-8"></head>
<body>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
/* Этот фрагмент нельзя менять */
$(function(){
  $('a[href^="#"]').click( function() {
   $('#hideme').hide(1000);
  });
});
 
/* Далее всё что угодно */
$(function(){
  $('a[href^="#"]').click( function() {
    var sc = $(this).attr("href");
    var dn = $(sc).offset().top;
    // sc - в переменную заносим информацию о том, к какому блоку надо перейти
    // dn - определяем положение блока на странице
 
    alert('Положение блока на странице по вертикали '+dn+' (Ошибочное)');
   
    $('html, body').animate({scrollTop: dn}, 1000);
    // 1000 скорость перехода в миллисекундах 
    
    $('a').remove();
  });
});
</script>
 
<a href="#target">Перейти к фрагменту</a>
<div id="hideme" style="display:block;width: 100%; height: 500px; background: green;"></div>
<div id="other" style="display:block;width: 100%; height: 1200px; background: yellow;"></div>
<div id="target" style="display:block;width: 100%; height: 300px; background: red;"></div>
<div id="other"  style="display:block;width: 100%; height: 700px; background: blue;"></div>
<div id="other"  style="display:block;width: 100%; height: 700px; background: magenta;"></div>
 
</body>
</html>

@Mr_Sergo · 10.09.2018, 18:21

Eskander88,
Не гарантирую, но попробуйте

PHP/HTML

<!DOCTYPE HTML>
<html lang="ru-RU">
<head><title></title><meta charset="UTF-8"></head>
<body>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
/* Этот фрагмент нельзя менять */
$(function(){
  $('a[href^="#"]').click( function() {
   $('#hideme').hide(1000);
  });
});
 
/* Далее всё что угодно */
$(function(){
  $('a[href^="#"]').click( function() {
    var sc = $(this).attr("href");
    var dn = $(sc).offset().top;
    // sc - в переменную заносим информацию о том, к какому блоку надо перейти
    // dn - определяем положение блока на странице
 
    alert('Положение блока на странице по вертикали '+dn+' (Ошибочное)');
   
    $('html, body').animate({scrollTop: dn - $('#hideme').height()}, 1000);
    // 1000 скорость перехода в миллисекундах 
    
    $('a').remove();
  });
});
</script>
 
<a href="#target">Перейти к фрагменту</a>
<div id="hideme" style="display:block;width: 100%; height: 500px; background: green;"></div>
<div id="other" style="display:block;width: 100%; height: 1200px; background: yellow;"></div>
<div id="target" style="display:block;width: 100%; height: 300px; background: red;"></div>
<div id="other"  style="display:block;width: 100%; height: 700px; background: blue;"></div>
<div id="other"  style="display:block;width: 100%; height: 700px; background: magenta;"></div>
 
</body>
</html>

@Eskander88 · 10.09.2018, 19:40 **[ТС]**

zlojnaxa, спасибо за вариант.. но суть в том, что на сайте идёт большая лента.

В основе функционала ленты аккордеон (спойлер) из bootstrap. Несколько всяких секций с меню и чекбоксами для заполнения полей.

Поймать высоту целевого элемента (вообщем то это заголовок секции) по вертикали можно когда отработают скрипты основного фреймворка.

Переходы между сворачивающимися секциями может быть как сверху-вниз, так и обратно, - в том случае, если пользователь выбрал неправильные настройки и ajax вернул команду на открытие определённой им секциии.

Приведённый выше пример, это примерно приведённый код, который отражает генеральный проблемный узел.

Пока, что удалось сделать велосипед такого плана:

Javascript

   <script type="text/javascript">
   /* Этот фрагмент нельзя менять */
   $(function(){
     $('a[href^="#"]').click( function() {
      $('#hideme').hide(1000);
     });
   });
   /* Далее всё что угодно */
   
   $(function(){
     $('a[href^="#"]').click( function() {
       var sc = $(this).attr("href");
       setTimeout(function ()
       {
       
       var dn = $(sc).offset().top;
       // sc - в переменную заносим информацию о том, к какому блоку надо перейти
       // dn - определяем положение блока на странице
      
       $('html, body').animate({scrollTop: dn}, 1000);
       // 1000 скорость перехода в миллисекундах 
       }, 1000);
       
       $('a').remove();
     });
   });
    </script>

но так то предстоит ещё добавление функций, то данный "костыль" быстро себя исчерпает

@Kraken73 · 11.09.2018, 08:55

Eskander88,
ну как-то так?

Javascript

$('a[href^="#"]').on('click', function(){
  var el = $(this);
  $("#hideme").hide(1000, function(){
    scrollToElement(el);
  });
});
 
function scrollToElement(el) {
    console.log(el);
    console.log("тут уже завершились другие скрипты");
}

@Eskander88 · 11.09.2018, 09:20 **[ТС]**

Javascript

   $(function(){
     $('a[href^="#"]').click( function() {
      $('#hideme').hide(1000);
     });
   });

к данному фрагменту доступа нет.. это фрагмент из библиотеки фреймворка, её трогать нельзя.. т.к на неё подвязаны другие функции сайта, это может привести к проблеме в скриптах других разработчиков...

можно только дописать свой скрипт..

Получается, что нет никаких способов просмотреть очередь событий в JavaScript? Если при создании алгоритма очередь событий не задали явно, то они так и будут выполняться пачкой одновременно?

@j2FunOnly · 11.09.2018, 10:51

Eskander88, попробуйте promise()

Return a Promise object to observe when all actions of a certain type bound to the collection, queued or not, have finished.

Javascript

/* Этот фрагмент нельзя менять */
$(function() {
  $('a[href^="#"]').click(function() {
    $('#hideme').hide(1000);
  });
});
 
/* Далее всё что угодно */
$(function() {
  $('a[href^="#"]').click(function() {
    $('#hideme').promise().done(function() {
      var sc = $(this).attr("href");
      var dn = $(sc).offset().top;
      // sc - в переменную заносим информацию о том, к какому блоку надо перейти
      // dn - определяем положение блока на странице
 
      alert('Положение блока на странице по вертикали ' + dn + ' (Ошибочное)');
 
      $('html, body').animate({
        scrollTop: dn
      }, 1000);
      // 1000 скорость перехода в миллисекундах 
 
      $('a').remove();
    })
  });
});

@Eskander88 · 11.09.2018, 11:21 **[ТС]**

j2FunOnly, это как раз то направление решения и ход мыслей, которые необходимы!

Правда в предложенном варианте есть ошибка: чтобы получить правильное « var sc = $(this).attr("href"); », this надо записать раньше, т.е

Javascript

$(function(){
  $('a[href^="#"]').click( function() {
  
    var my_target = $(this); // получаем this прежде чем войти в функ
    
    $('#hideme').promise().done(function(){
      /* var sc = $(this).attr("href"); */
      var sc = $(my_target).attr("href");
      var dn = $(sc).offset().top;
      // sc - в переменную заносим информацию о том, к какому блоку надо перейти
      // dn - определяем положение блока на странице
 
      alert('Положение блока на странице по вертикали '+dn+' (Верное)');
     
      $('html, body').animate({scrollTop: dn}, 1000);
      // 1000 скорость перехода в миллисекундах 
 
      // $('a').remove(); всё таки лишнее
    });
    
  });
});

И обнаружилось, что почему-то так не работает плавный скролл. Хотя к якорю прыгает правильно. Разбираюсь почему. В изначальном демо-коде плавно скроллит, но не туда (неправильно по высоте).

	11.09.2018, 11:21