jquery - 为什么包装在 setTimeout 中时变量不通过

Question

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

如果 intervalIsClear 为 false，则它是 hoveredItemIndex 在 setTimeout() 中声明，但返回 -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);