5

Есть несколько рядом лежащих объектов, наводя на каждый из них возникает подсказка с анимацией (список ul, в котором li плавно появляются один за другим). Так как элементов много и пользователь может резко водить по ним, решил сделать задержку в виде debounce(f, 150ms). Но теперь если провести случайно мышкой по объекту и не взаимодействовать впринципе ни с чем то появляется подсказка последнего задетого объекта (оно и логично), так как debounce срабатывает позже чем сработал .stop().fadeOut(). А так же иногда появляется баг, что если в рукой дернуть например с одного объекта на другой (не стал воссоздавать здесь, может так кто то разберется, если нет то приведу пример постараюсь), то подсказка возникает под курсором, но так как она перекрывает объект, который показывает то она тут же исчезает и снова мышка на обекте, подсказка появляется и все зацикливается.

function debounce(f, ms) {
    let timer = null;
    return function (...args) {
        const onComplete = () => {
            f.apply(this, args);
            timer = null;
        }
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(onComplete, ms);
    };
}

function renderHint() {
    $('#hint').stop().append('123').fadeIn('100');
}

let renderHintDebounce = debounce(renderHint, 150);
$('.block').on('mouseenter', function(e) {
  $('#hint').empty();
  $(this).mousemove(function(pos) {
    $("#hint")
      .css('left', (pos.pageX + 50)+'px')
      .css('top', (pos.pageY - 30)+'px');
  });
  renderHintDebounce();
});
$('.block').on('mouseleave', function(e) {
  $('#hint').stop().fadeOut(100).queue(function() {
    $(this).empty().dequeue();
  })
});
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
}

.block {
  width: 100px;
  height: 100px;
  background: red;
}

#hint {
  position: absolute;
  display: none;
  background: #eee;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="block"></div>
</div>
<div id="hint">123</div>

Добавлено. Если у всплывающей подсказки убрать дополнения по расположению т.е. добавленные 50 и 30 пикселей то ошибка с появлением и исчезновением подсказки похожа на ту что у меня.

0

2 ответа 2

3

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

Используйте опыт сообщества, к примеру:

Одним debounce здесь не обойтись, нужно предусмотреть все возможные варианты поведения, плюс варианты при изменении размеров окна. Однозначно ответить на вопрос нет возможности. Это все равно не будет правильным ответом.

6
  • Но зачем предлагать библиотеки в качестве ответа, когда ТС хочет разобраться в своей проблеме с кодом?
    – Diskyp
    27 июл 2018 в 6:52
  • Опыт сообщества очень хорошо, приму во внимание обязательно и при возможности перепишу свой код более стабильно. Но как заметил, @Diskyp , хотелось, конечно, пока решить данную проблему. Но все-ровно Вам спасибо 27 июл 2018 в 6:57
  • Согласен, учитесь. Но вижу каждый день, как игнорируется опыт людей, которые потратили 1000-чи часов на решение классических проблем веб-интерфейсов. И как создаются "не-работающие решения одного дня", да это опыт, но опыт плохой. Зачем тогда паттерны и библиотеки? Вы же решаете стандартную задачку и столкнулись с вполне стандартными проблемами. Удачи.
    – diproart
    27 июл 2018 в 7:09
  • @diproart если говорить об опыте программирования, то гораздо лучше пробовать писать свои решения, как это делает ТС. Ещё лучше, при неудачах, просить совета у более опытных людей, как это делает ТС. Таким образом однажды ТС и сам сможет стать создателем прекрасных веб-интерфейсов. И ни в коем случае не стоит просто пользоваться всем готовым, это вредит умственному и профессиональному развитию, только если тебе не нужно срочно выполнить некий заказ и нет времени на креатив.
    – Diskyp
    27 июл 2018 в 7:23
  • Я вас понял, спасибо. Библиотеки - это и есть опытные люди. Читать и понимать чужой код - это норма для любого программиста. Но я с вами не спорю, делайте как вам нравится. Пусть каждый выберет свой путь.
    – diproart
    27 июл 2018 в 7:26
1

$(function(){
let hint=$('#hint'),
hintTimer,
fadeTime=400
$('.block').on('mouseenter', function(e) {
  let el=$(this)
  el.mousemove(function(pos) {
    hint
      .css('left', (pos.pageX + 50)+'px')
      .css('top', (pos.pageY - 30)+'px');
  });
  hintTimer=setTimeout(()=>hint.html(el.attr('hint')).fadeIn(fadeTime),fadeTime)
});
$('.block').on('mouseleave', function(e) {
  if(hintTimer) clearTimeout(hintTimer)
  hint.off('mousemove').fadeOut(fadeTime)
});
})
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
}

.block {
  width: 100px;
  height: 100px;
  background: red;
  border:1px solid white;
}

#hint {
  position: absolute;
  display: none;
  background: #eee;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="block" hint="FIRST red thing"></div>
  <div class="block" hint="SECOND red thing"></div>
  <div class="block" hint="THIRD red thing"></div>
</div>
<div id="hint">123</div>

3
  • Чего-то данный код не придал мне нужного эффекта, теперь получилось что при прохождении курсора по куче объектов разом, скрипт проигрывает анимацию столько раз сколько объектов зацепило =/ 27 июл 2018 в 7:35
  • @Алексей для нескольких объектов тогда лучше вовсе не работать с очередью анимаций, можно было перестроить вашу программную логику с таймерами. Код обновил.
    – Diskyp
    27 июл 2018 в 8:36
  • 1
    @Алексей ну что, теперь ваша проблема решена? Нужна ещё помощь?
    – Diskyp
    27 июл 2018 в 11:04

Ваш ответ

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

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