Как сделать выполнение функции по таймеру?

Question

[vladzvezdin]

Всем привет. Это больше теоретический вопрос. А возможно ли в js установить задержку на, если можно так выразиться, невыполнение скрипта. Сейчас поясню) Допустим у меня есть блок при наведении на который, выводится алерт. Можно ли сделать так, чтобы алерт вывелся через секунду, но важно уточнить...алерт не должен показываться (функция не должна выполнится), если убрать курсор с блока сразу же. Т.е. курсор должен находиться на блоке какое-то время, чтобы скрипт выполнился

Comments

[Модератор]

Двойка вам за формулировку заголовка вопроса.

[Lynn «Кофеман»]

+1
Какое отношение заголовок имеет к вопросу?

Answer 1

[Алексей Уколов]

var $target = document.querySelector('#target');

var timeoutId;

$target.addEventListener('mouseenter', function () {
  clearTimeout(timeoutId); // По идее, такого быть не должно, но я параноик
  
  timeoutId = setTimeout(function () {alert(1);}, 2000);
});

$target.addEventListener('mouseleave', function () {
  clearTimeout(timeoutId);
})

https://jsfiddle.net/alexey_m_ukolov/zokeg75d/2/

Comments

[vladzvezdin]

Алексей Уколов А если я аяксом подгружаю контент при наведении? Не совсем понимаю, как скидывать таймаут

[Алексей Уколов]

Покажите код.

[vladzvezdin]

Алексей Уколов,

$(document).on('mouseenter','.model-elements',function(){
       
        BX.showWait();
        var postData = {
            id: id,
            sectionid: sectionid,
            propid: propid,
            sessid: BX.bitrix_sessid()
        };
       BX.ajax({
            method: 'POST',
            dataType: 'html',
            url: '/local/tools/getElementInfo.php',
            data: postData,
            onsuccess: function (result)
            {
                BX.closeWait();
                timeoutId = setTimeout(function () {
                    $('.ajax-element').html(result);
                }, 500);

               
            },
            onfailure : function()
            {
                BX.closeWait();

                $('#ajax-element').html('Ошибка');
            }
        });
        return false;

    });

[Алексей Уколов]

А теперь опишите желаемое поведение.

[vladzvezdin]

Алексей Уколов, чтобы контент не подгружался, если курсор находится на элементе меньше, чем пол секунды

[vladzvezdin]

Алексей Уколов, у меня не получается сбросить счетчик, как в простом варианте

[Алексей Уколов]

Вам всю вашу логику нужно поместить в setTimeout.

Answer 2

[hzzzzl]

https://codepen.io/anon/pen/QeKBNj?editors=1010

Comments

[Алексей Уколов]

Событие mouseover будет множество раз вызываться, если у блока сложная внутренняя структура.
learn.javascript.ru/mousemove-mouseover-mouseout-m...