0

Всем привет. У меня есть форма с фильтрами. При изменении значений хочу вывести popover с кнопкой "Перейти" которая скрывается через 4 секунды. Проблема проявляется если изменять значения формы чаще чем в 4 секунды. Старый popover исчезает, на долю секунды появляется новый и сразу же исчезает.

Вот мой код:

function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};


$('.filter__entity input, .filter__entity select').on('change keypress keydown', debounce(
    function(){
        //$('.filter__entity').popover('hide');
        $filterForm = $('*[data-role=filter-form]');
        action = $filterForm.attr('action');
        data = $filterForm.serialize();
        console.log(data);
        $(this).parents('.filter__entity').popover('destroy');
        $(this).parents('.filter__entity').popover({
            'content': '<a href="' + action + '?' + data + '" class="filter__submit button" style="margin: 1em;">Подобрать</a>',
            'html': true,
            'delay': { 'show': 300, 'hide': 100, },
        }).popover('show');

        // autohiding
        $('.filter__entity').on('shown.bs.popover', function() {
            var $pop = $(this);
            setTimeout(function () {
                $pop.popover('hide');
            }, 4000);
        });
    }, 300)
);

Полагаю, что виной тому autohiding, который срабатывает для второго popover, хотя должен был сработать для первого. Что я делаю не так?

3
  • Код не из простых, скажем прямо.Я не смог заставить popover всегда адекватно реагировать на .filter__entity select change: почему-то иногда при смене значения popover появляется и сразу исчезает. Хотя код как в вопросе (только $(this).parents('.filter__entity') вынесено в переменную). Проблемный fiddle.
    – Regent
    16 июн 2015 в 4:37
  • В частности, не срабатывает shown.bs.popover для .filterEntity.
    – Regent
    16 июн 2015 в 4:40
  • Из-за этой проблемы протестировать топорное решение (с помощью счетчика) проблемы и не получается: fiddle.
    – Regent
    16 июн 2015 в 4:43

1 ответ 1

0

Есть подозрение, что для нового события срабатывает старый таймаут.
Надо присвоить ему глобальный id и в shown.bs.popover всегда отменять старые таймауты. Как то так
<input type="text" data-container="body" data-toggle="popover" data-placement="down" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-trigger="focus">
js
$('[data-toggle="popover"]').on('change keypress keydown',function(){ $(this).popover('show'); }); var timeout; $('[data-toggle="popover"]').on('shown.bs.popover', function () { t = $(this); clearTimeout(timeout); timeout = setTimeout(function(){ t.popover('hide'); },4000); });

4
  • добавьте, пожалуйста, код с jsfiddle непосредственно в тело ответа (ссылку убирать не надо). 16 июн 2015 в 7:49
  • Вау! Это работает! Осталось понять почему... Ведь при открытии popover вызывается clearTimeout. Он должен убивать функцию скрытия.
    – Roman Fov
    16 июн 2015 в 9:48
  • Я же объяснил, что для нового события срабатывает таймаут предыдущего события или может быть еще более раннего.
    – sepgg
    16 июн 2015 в 9:51
  • Всё, теперь понял. Сам поповер убивался в одном месте (при повторном вызове, а setTimeout оставался ждать)... И убивал новый открывшийся... Спасибо вам
    – Roman Fov
    16 июн 2015 в 9:57

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.