Debounce — функция будет выполнена только тогда, когда после последней попытки вызова прошло определённое время. Задержка начинает заново отсчитываться с каждой новой попыткой вызова. Например если повесить debounce на onscroll с временем 100ms, то функция выполнится через 100ms после прекращения скрола.
Схематично:
Пример вывода карты, созданной в конструкторе Яндекс.Карт в jQuery UI Dialog:
$('<div id="map"></div>').dialog({ open: function() { var mapScript = document.createElement('script'); mapScript.src = 'https://api-maps.yandex.ru/services/constructor/1.0/js/?sid=...&lang=ru_RU&sourceType=constructor&scroll=true'; this.appendChild(mapScript); }, close: function() { $(this).remove(); }, title: 'Карта', width: 500, height: 400, modal: true });
// Координаты МКАД. Данные лежат здесь - http://pastebin.com/raw.php?i=DKgMrxqF var mkadCoordinates = ...; // Проверяемый адрес var address = 'Москва, Кремль'; // Создаём полигон в границах МКАД var mkadPolygon = new ymaps.Polygon(mkadCoordinates, {}, {visible: false}); map.geoObjects.add(mkadPolygon); // Геокодируем проверяемый адрес ymaps.geocode(address).then(function (result) { var addressCoordinates = result.geoObjects.get(0).geometry.getCoordinates(); // Проверяем входят ли координаты адреса в область МКАДа
enquire.js — это небольшая (2.2kb) javascript библиотека позволяющая детектить медиа-выражения. Библиотека не зависит от jQuery и других либ. Работает в браузерах с поддержкой matchMedia.
Пример использования — при размере экрана браузера меньше 980px нужно переместить блок из шапки в сайдбар:
enquire.register('screen and (max-width: 980px)', { // Вызывается, когда медиа-выражение начинает удовлетворять правилу match: function() {
Крайне удачный курс по Javascript от Hexlet:
Полный курс по самому распространенному языку программирования на планете. От переменных до регулярных выражений, замыканий и функционального программирования.
Популярный кейс в последнее время — фиксация меню при скролинге (демо).
jQuery плагин ScrollToFixed позволяет добиться такого поведения. Весит в сжатом виде ~6kb, будет работать с jQuery 1.4.4 (актуально для Drupal 7), не требует дополнительной разметки, позволяет указать размер верхнего отступа и другие опции отображения.
Использование:
<script src="jquery.js"></script> <script src="jquery-scrolltofixed-min.js"></script>
Пример отображения на карте маршрута от Белорусского вокзала до Лефортово:
ymaps.route(['Москва, Белорусский вокзал', 'Москва, Лефортово'], {mapStateAutoApply:true}).then( function(route) { map.geoObjects.add(route); alert('Длина маршрута = ' + route.getHumanLength()); }, function(error) { alert('Невозможно построить маршрут'); } );
Дано — гугло-карта с каким-то количеством маркеров.
Задача — автоматически смасштабировать и отцентрировать карту таким образом, чтобы было видно все маркеры.
Решение — использовать класс LatLngBounds, позволяющий определять область на карте:
Дано — страница с неизвестным количеством кнопок. На каждую кнопку навешен обработчик onclick, который асинхронно выполняет какую-то функцию:
<input type="button" value="Button 1" /> <input type="button" value="Button 2" /> <input type="button" value="Button 3" /> <script> $(function() { $('input').click(function() { var $button = $(this); $button.attr('disabled', 'disabled'); setTimeout(function() { $button.removeAttr('disabled'); }, 2000); }); }); </script>
Задача — поставить выполнение обработчиков onclick в очередь, т.е. чтобы каждый новый начинал работу только после завершения выполнения предыдущего.
Решение на jQuery.queue():
В русской версии мастера генерации кнопки +1, почему то нет опции "asynchronous code", о которой так радостно трубил гугл (пруф). Поэтому правим ручками:
вместо
<script src="https://apis.google.com/js/plusone.js"></script> <g:plusone></g:plusone>
пишем
<script>
(function() {
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';