setTimeout не работает с $ (это)

Question

$(document).ready(function(){
            $("ul > li").mouseenter(function(){
                setTimeout(function () {
                     $(this).find(".ul2").show();
                 }, 2000);
            });
            $("ul > li").mouseleave(function(){
                $(this).find(".ul2").hide();
            });
        });

.ul1{
                list-style: none;
                position: absolute;
            }
            .ul1 > li{
                float: left;
                margin-left: 40px;
            }
            .ul2{
                display: none;
                margin: 0px;
                padding: 0px;
            }
            .ul2 li{
                display: block;
            }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="ul1">
        <li>
            <a href="#">Home</a>
            <ul class="ul2">
                <li>Home</li>
                <li>Home</li>
                <li>Home</li>
            </ul>
        </li>
        <li>
            <a href="#">about</a>
            <ul class="ul2">
                <li>about</li>
                <li>about</li>
                <li>about</li>
            </ul>
        </li>
        <li>
            <a href="#">other</a>
            <ul class="ul2">
                <li>other</li>
                <li>other</li>
                <li>other</li>
            </ul>
        </li>
    </ul>

Я использую setTimeout, он не работает с $ (this) ... без использования setTimeout это работает ... так скажите мне, что здесь не так ...

Answer 1

this внутри функции относится к этой функции, а не к "внешней" функции this.

setTimeout(function () { // you have a new this now
    $(this).find(".ul2").show();
}, /* you have the old this now */ 2000);

Вам нужно либо получить ссылку на this вне функции:

var that = this;
setTimeout(function () {
    $(that).find(".ul2").show();
}, 2000);

или связать другой this с функцией:

setTimeout(function () {
    $(this).find(".ul2").show();
}.bind(this), 2000);