为什么变量在包装在setTimeout中时不会传递

Question

如果intervalIsClear为true，则hoveredItemIndex正在拾取LI元素的索引。

如果intervalIsClear为false，则在setTimeout（）内声明hoveredItemIndex，但返回-1。为什么一旦它被包装在setTimeout（）中就找不到索引？

function()
                {
                    if (intervalIsClear == true){

                        hoveredItemIndex = $('.menu li').index(this);
                        changeToHoverText();
                    } else {
                        hello = setTimeout(function(){
                            hoveredItemIndex = $('.menu li').index(this);
                            alert (hoveredItemIndex);
                            changeToHoverText();
                        },500);
                    }
                }

Answer 1

因为setTimeout函数中的执行上下文已更改。请记住，在javascript中，this关键字是函数执行的上下文。在您的情况下，this对象是window对象。

    var self = this;

    if (intervalIsClear == true){
        hoveredItemIndex = $('.menu li').index(this);
        changeToHoverText();
    } else {
        hello = setTimeout(function(){
            hoveredItemIndex = $('.menu li').index(self);
            alert (hoveredItemIndex);
            changeToHoverText();
        },500);
    }

因此，如上所述调用setTimeout()，您实际上正在执行此操作window.setTimeout()。

Answer 2

这是因为当执行函数时，setTimeout的回调会改变方法的执行上下文。这意味着this回调内外的setTimeout变量指向不同的对象。

使用$.proxy手动分配回调方法的执行上下文

function () {
    if (intervalIsClear == true) {

        hoveredItemIndex = $('.menu li').index(this);
        changeToHoverText();
    } else {
        hello = setTimeout($.proxy(function() {
            hoveredItemIndex = $('.menu li').index(this);
            alert(hoveredItemIndex);
            changeToHoverText();
        }, this), 500);
    }
}

Answer 3

this回调中的

setTimeout与外部不一样。

您需要：

                var that = this;
                hello = setTimeout(function(){
                    hoveredItemIndex = $('.menu li').index(that);
                    alert (hoveredItemIndex);
                    changeToHoverText();
                },500);