setTimeout无法使用$（this）

Question

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我使用setTimeout它不适用于$（this）... 没有使用setTimeout它工作... 所以告诉我这里有什么不对......

Answer 1

函数内部的

this指的是该函数，而不是＆＃34;外部＆＃34;功能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);