Задержка при ховере в 1 секунду

hover delay in 1 secondЧасто бываети так, что нужно задать небольшую задержку при ховере. Так же добавлять класс. Написал нельшой скрипт, который дает такую возможность. При ховере, с промежутком в одну секунду будет добавляться класс "active" после того как мы навели курсор мышки на элемент. В нашем случае список с классом "list-region". 

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

Временной промежуток 

500 = пол секунды
1000 = 1 секунда ( как на нашем примере )
3000 = 3 секунды
и т.д.

JavaScript:

jQuery(function($) {
    $("ul.list-region li").hover(function() {
        var el = $(this);
        var timeout = setTimeout(function() {
            el.addClass("active");
        }, 1000);
        el.data("timeout", timeout);
    }, function() {
            clearTimeout($(this).removeClass("active").data("timeout"));
    });
});