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

Question

Я являюсь абсолютным гигантом в веб-дизайне, который был брошен в глубокий конец. За последние две недели мне удалось собрать пользовательскую карту google с маркерами и информационными окнами, появляющимися при нажатии ссылки за пределами карты.

----- map.js

function triggerClick(id) { 
    google.maps.event.trigger(gmarkers[id],"click") 
}; 

function createMarker(latlng, html, id) { 
    var contentString = html; 
    var marker = new google.maps.Marker({ 
     position: latlng, 
     map: map 
    }); 
    google.maps.event.addListener(marker, 'click', function() { 
     infowindow.setContent(contentString); 
     infowindow.open(map,marker); 
    }); 
    gmarkers[id] = marker; 
} 

Теперь я пытаюсь совместить его с другим сценарием, который реализует анимированный параллакс прокрутки, которая перемещает страницу из щелкнули ссылку на карту, используя другой сценарий, использует jquery. Это также работает, но всплывающее окно marker + infowindow не может произойти. Мне нужно, чтобы маркер + infowindow pop после завершения прокрутки.

----- scripts.js

jQuery(document).ready(function ($) { 

    $(window).stellar(); 

    var chartLink = $('.chart').find('li'); 
    slide = $('.slide'); 
    htmlbody = $('html,body'); 

    function goToByScroll(dataslide) { 
     htmlbody.animate({ 
      scrollTop: $('.slide[data-slide="' + dataslide + '"]').offset().top 
     }, 2000, 'easeInOutQuint'); 
    } 
    chartLink.click(function (e) { 
     e.preventDefault(); 
     dataslide = $(this).attr('data-slide'); 
     goToByScroll(dataslide); 
    }); 

}); 

HTML-ссылки Я пытаюсь цель являются:

----- index.html

<ul class="chart"> 
<li> 
    <a data-slide="3" href="javascript:triggerClick('bond')">Bond Street</a></li> 
    <li><a data-slide="3" href="javascript:triggerClick('barbican')">Barbican</a> 
</li> 
</ul> 

Что касается поскольку я понимаю, что одно и то же событие щелчка запускает два разных события одновременно, одно из функции triggerClick, а другое - из функции goToByScroll.

Я искал решения в течение нескольких дней и пробовал много вещей, особенно callback(), но работа с отдельными скриптами выходит за рамки моего жареного мозга. Может кто-то дать мне руку.

Спасибо!

Answer 1

Вы находитесь на правильном пути с использованием обратного вызова. Вам нужно вызвать щелчок маркера после завершения прокрутки. Если проблема, стоящая перед вами в ваших сценариях, скрывает функции друг от друга, создает глобальный объект приложения и помещает туда необходимые функции. Вы также захотите удалить javascript из атрибутов href и заменить их другим атрибутом данных соответствующим идентификатором.

<ul class="chart"> 
    <li><a data-slide="3" data-id="bond">Bond Street</a></li> 
    <li><a data-slide="3" data-id="barbican">Barbican</a></li> 
</ul> 

Создание приложения широкий объект для хранения функций

window.myapp = {}; 

Добавить функцию triggerClick к этому объекту

myapp.triggerClick = function(){...}; 

Теперь называют эту функцию после того, как анимация завершена с помощью обратного вызова

function goToByScroll(data) { 
    htmlbody.animate({ 
     scrollTop: $('.slide[data-slide="' + data.slide + '"]').offset().top 
    }, 2000, 'easeInOutQuint', function() { 
     myapp.triggerClick(data.id); 
    }); 
} 
chartLink.click(function (e) { 
    e.preventDefault(); 
    goToByScroll($(this.data()); // use jquery to grab all the data attributes 
});