@IvanVvV

Как задержать выполнение mouseenter?

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
	$(document).ready ( function() {
$('[ID*=fruit]').mouseenter(function(){
	lastnumb= $(this).prop('id').replace(/[^\d;]/g, '');
	 $('#num_words'+lastnumb).animate({height:'show'},250);
}).mouseleave(function(){
		$('#num_words'+lastnumb).animate({height:'hide'},250);
                 });
	});				 
				 </script>
				 
				 
<div id="result">
	<div id="fruit41" class="item" style="display: block;"><div id="num_words41" style="display: none;">Testtest</div><div>00000000</div></div>
	<div id="fruit4" class="item" style="display: block;"><div id="num_words4" style="display: none;">Testtest</div><div>11111111</div></div>
	<div id="fruit1" class="item" style="display: block;"><div id="num_words1" style="display: none;">Testtest</div><div>22222222</div></div>
</div>


Как сделать задержку на .mouseenter именно задержку самого события.

Нужно что бы при быстром проведении мышкой по пунктам они оставались свернутыми, а при задержке на секунду на нужном он разворачивался jsfiddle.net/DUpsL/535

Блоки динамичные, так,что в принципе задержка на блок result тоже сгодится.
  • Вопрос задан
  • 479 просмотров
Решения вопроса 3
BRAGA96
@BRAGA96
var lastnumb = '', timeout = 0;

$('[id*=fruit]').on({
	mouseenter: function() {
		timeout = setTimeout(function() {
			lastnumb = $(this).prop('id').replace(/[^\d;]/g, '');
			$('#num_words' + lastnumb).animate({
				height: 'show'
			}, 250);
		}.bind(this), 1000);
	},
	mouseleave: function() {
		clearTimeout(timeout);
		$('#num_words' + lastnumb).animate({
			height: 'hide'
		}, 250);
	}
});
Ответ написан
Комментировать
@webfln
const throttle = (func, limit) => {
  let inThrottle
  return function() {
    const args = arguments
    const context = this
    if (!inThrottle) {
      func.apply(context, args)
      inThrottle = true
      setTimeout(() => inThrottle = false, limit)
    }
  }
}

$('[ID*=fruit]').addEventListener('mouseenter', throttle(() => {
	lastnumb= $(this).prop('id').replace(/[^\d;]/g, '');
	$('#num_words'+lastnumb).animate({height:'show'},250);
}, 1000));
Ответ написан
Комментировать
rockon404
@rockon404
Frontend Developer
Использование id в подобных задачах очень плохая практика. Постарайтесь никогда так не делать.
Можно использовать любую готовую реализацию debounce, как и написать свою.

Вариант решения с debounce
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
SagePtr
@SagePtr
Еда - это святое
К примеру, на mouseenter создавать тайм-аут, который на mouseleave убирать
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы