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

Question

[IvanVvV]

<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 тоже сгодится.

Answer 1

[Ihor Bratukh]

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);
	}
});

Answer 2

[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));

Answer 3

[Антон Спирин]

Использование id в подобных задачах очень плохая практика. Постарайтесь никогда так не делать.
Можно использовать любую готовую реализацию debounce, как и написать свою.

Вариант решения с debounce

Comments

[IvanVvV]

Спасибо! А чем нежелательно использование id?

[Антон Спирин]

IvanVvV, такой код тяжело поддерживать и масштабировать. Может быть куча ошибок в случае дублирования id. Даже читать его тяжело.

Answer 4

[SagePtr]

К примеру, на mouseenter создавать тайм-аут, который на mouseleave убирать

Comments

[IvanVvV]

Да, я так делал, но функции продолжают выполняться.

[SagePtr]

IvanVvV, видимо, идентификатор тайм.аута у вас каким-то образом модифицируется и вы очищаете не тот тайм.аут, который задумывали