Показать сообщение отдельно
  #1 (permalink)  
Старый 07.04.2014, 10:14
Новичок на форуме
Отправить личное сообщение для rtfl Посмотреть профиль Найти все сообщения от rtfl
 
Регистрация: 07.04.2014
Сообщений: 1

settimeout pause/resume и mouseenter/mouseleave
Задача: есть карта с маркерами (leaflet), необходимо что бы при наведении мыши на маркер появлялся попап, а так же при перемещении мыши внутрь попапа он оставался открытым.
Концепция: при mouseleave с маркера или попапа вызывается функция закрытия попапа по таймауту. При mouseenter на маркер или попап ставится пауза таймера.
Реализация: Переопределил функцию закрытия попапа следующим образом:
closePopup: function (t) {
        t = t || 300;
        if (this._popup) {
            var ths = this;
           ths._timer = new Timer(function () {
                    ths._popup._close();
            }, t);
        }
        return this;
    },

где Timer:
function Timer(fn, countdown) {
    var ident, complete = false;

    function _time_diff(date1, date2) {
        return date2 ? date2 - date1 : new Date().getTime() - date1;
    }

    function pause() {
        clearTimeout(ident);
        total_time_run = _time_diff(start_time);
        complete = total_time_run >= countdown;
    }

    function resume() {
        ident = complete ? -1 : setTimeout(fn, countdown);
    }

    var start_time = new Date().getTime();
    ident = setTimeout(fn, countdown);

    return { pause: pause, resume: resume };
}

Проблема: 1. При быстром премещении мыши на маркерах может возникнуть ситуация, когда курсор установлен на маркере, но попап закрывается, хотя должен открыться. 2. Если открыть попап, а затем попробовать быстро переместить курсор вовне и обратно на попап, а затем опять вовне, то попап не закроется.

Код целиком: http://jsfiddle.net/xwreT/

Последний раз редактировалось rtfl, 07.04.2014 в 15:31.
Ответить с цитированием