Javascript 自行创建的fadeIn（）函数无法正常工作

我正在尝试使用Javascript创建

fadeIn（）

函数。我遇到了问题，当我单击

fadeIn

按钮时，它不会执行

fadeIn

动画，相反，我必须多次单击它才能执行fadeIn。有人知道我如何解决这个问题吗

// Created a jQuery like reference
function $(selector) { 
    if (!(this instanceof $)) return new $(selector); // if new object is not defined, return new object
    this.selector = selector; // setting selector attribute
    this.node = document.querySelector(this.selector); // finds single element from the DOM
};

var fInFrom = 0, fOutFrom = 10;

$.prototype.fadeIn = function() {
    var target = this.node,
        newSetting = fInFrom / 10;

    // Set Default styles for opacity   
    target.style.display = 'block';
    target.style.opacity = newSetting;

    // fadeInFrom will increment by 1
    fInFrom++;

    var loopTimer = setTimeout('this.fadeIn', 50);

    if (fInFrom === 10) {
        target.style.opacity = 1;
        clearTimeout(loopTimer);
        fInFrom = 0;
        return false;
    }

    return this;
}

$('#fadeIn').node.addEventListener('click', function() {
    $('#box').fadeIn();
});

---

这是你的问题：

setTimeout('this.fadeIn', 50)

这将设置一个超时，以在距当前时间约50毫秒的时间内计算全局范围内的表达式

this.fadeIn

。这有两个问题：

它在全球范围内

此

是

窗口

，不是

$

的实例，因此

此.fadeIn

是

未定义的

即使它被正确地解决了，您也只是在计算this.fadeIn

；你不是在说。您需要使用
this.fadeIn（）
让它执行任何操作。（如果使用当前代码执行此操作，这将揭示您的第一个问题。）

要解决这个问题，请传递一个函数，而不是一个字符串。你可能会天真地这样做：

setTimeout(function() {
    this.fadeIn();
}, 50);

不幸的是，虽然我们现在有了变量的词法范围，但JavaScript中的

这个
是动态的；我们必须解决这个问题。因为我们有变量的词法范围，我们可以利用它：[]

解决后，您可能需要研究：

不使用全局变量保持淡入淡出状态。即使在修复之后，在不同的元素上同时运行两个淡入淡出动画也不会像预期的那样工作。（）
仅在需要时设置超时；现在，你总是设置它，然后清除它，如果你不需要它。您可能只想在需要的时候设置它
这是你的问题：

setTimeout('this.fadeIn', 50)

这将设置一个超时，以在距当前时间约50毫秒的时间内计算全局范围内的表达式
this.fadeIn
。这有两个问题：

它在全球范围内
此
是
窗口
，不是
$
的实例，因此
此.fadeIn
是
未定义的
即使它被正确地解决了，您也只是在计算this.fadeIn
；你不是在说。您需要使用
this.fadeIn（）
让它执行任何操作。（如果使用当前代码执行此操作，这将揭示您的第一个问题。）

要解决这个问题，请传递一个函数，而不是一个字符串。你可能会天真地这样做：

setTimeout(function() {
    this.fadeIn();
}, 50);

不幸的是，虽然我们现在有了变量的词法范围，但JavaScript中的
这个
是动态的；我们必须解决这个问题。因为我们有变量的词法范围，我们可以利用它：[]

解决后，您可能需要研究：

不使用全局变量保持淡入淡出状态。即使在修复之后，在不同的元素上同时运行两个淡入淡出动画也不会像预期的那样工作。（）
仅在需要时设置超时；现在，你总是设置它，然后清除它，如果你不需要它。您可能只想在需要的时候设置它
快告诉我吧，解释得比我更清楚。这是一个代码笔，里面有一个有效的代码版本：@Paul：如果你仔细看，在最后一个代码块之前有一点
[尝试]
。非常感谢你的深入解释。它工作得很好，将来会省去我很多麻烦。我有点不清楚如何解决您提到的下一个问题，
仅在需要时设置超时；现在，你总是设置它，然后清除它，如果你不需要它。您可能只想在一开始需要时设置它。
您建议如何将其实际放入代码中。事实上，我对OOP编程非常陌生，我自己也在学习它…@Shivam:现在，你在
if
语句中得到了超时清除代码，条件是
fInFrom==10
。如果您从中删除了
clearTimeout
，并将
setTimeout
移动到
else
中，则无需清除它；您只能在希望它执行另一个步骤时设置它，
setTimeout
（与
setInterval
）会在它调用您的函数时自动清除它。我已经尝试了您的建议，但似乎同样的问题仍在发生，您知道为什么吗？请告诉我，有比我更清楚的解释。这是一个代码笔，里面有一个有效的代码版本：@Paul：如果你仔细看，在最后一个代码块之前有一点
[尝试]
。非常感谢你的深入解释。它工作得很好，将来会省去我很多麻烦。我有点不清楚如何解决您提到的下一个问题，
仅在需要时设置超时；现在，你总是设置它，然后清除它，如果你不需要它。您可能只想在一开始需要时设置它。
您建议如何将其实际放入代码中。事实上，我对OOP编程非常陌生，我自己也在学习它…@Shivam:现在，你在
if
语句中得到了超时清除代码，条件是
fInFrom==10
。如果您从中删除了
clearTimeout
，并将
setTimeout
移动到
else
中，则无需清除它；您只能在希望它执行另一个步骤时设置它，
setTimeout
（与
setInterval
相反）将在它调用您的函数时自动清除它。我已经尝试了您的建议，但似乎同样的问题仍在发生，您是否知道为什么会这样？