如何使用for循环和匿名函数调用在JavaScript中创建fadein效果

我正在使用纯javascript创建一个简单的fadein效果。为此，我尝试了三种方法M1使用递归功能，M2基于for循环和匿名函数，M3基于for循环和基于字符串的函数调用

在M1下，代码以fadein效果提供完美输出

但是在M2下，fadein效果不起作用，内容在指定的持续时间后直接可见

现在再次在M3下生成fadein效果

有谁能指导我如何基于M2生成fadein效果。表示对循环使用和匿名函数调用

M1----工作完美----

函数启动程序（）{
var i=0；
var el=document.getElementById（“div1”）；
法代因（el，i）；
}
函数fadeIn（el，i）{
i=i+0.01；
seto（el，i）；
如果（i）
它说--“不要在循环中生成函数”

这是个好建议，但这不是你的（主要）问题

您的问题是，从现在开始，您每1秒调用一次函数。它们将以随机顺序执行，从1秒开始，并以最快的速度启动

这样做：

function fadeIn(el) {
    var go = function(j) {
       setTimeout( function(){ seto(el,j); } , j *1000);}
    };

    for (var i = 0 ; i<=1 ; i = i + 0.01) go(i);
}

功能fadeIn（el）{
var go=函数（j）{
setTimeout（函数（）{seto（el，j）；}，j*1000）；}
};
对于（var i=0；i，以下是问题的完整答案

ANS2--

函数fin（）{
var i=0；
var el=document.getElementById（“div1”）；
法代因（el，i）；
}
函数fadeIn（el，i）{
var go=函数（i）{
setTimeout（函数（）{seto（el，i）；}，i*1000）；
};
对于（i=0；这是我问题的完美答案……还有一件事……在我的M2中，我直接将setTimeout及其匿名函数调用放在for循环下，在你的答案中，你也遵循同样的方法，在循环外创建一个函数并从循环内调用它。它是有效的…？？我试图知道di是什么差异…？啊，一个巨大的差异。在您的版本中，
i
是函数fadeIn的本地变量，因此每次调用
seto
都将具有相同的值（因为它是相同的变量）。在我的版本中，
j
是
go
的本地变量，因此它具有调用
i
时的值。
function starter(){
    var i = 0;
    var el = document.getElementById("div1");
    fadeIn(el,i);
}

function fadeIn(el,i) {

    for ( i = 0 ; i<=1 ; i = i + 0.01){
    setTimeout( function(){ seto(el,i); } , i * 1000);}
}

function seto(el,i)
{
    el.style.opacity = i;
}

starter();

var i = 0;
var el = document.getElementById("div1");

function fadeIn() {
    for ( i = 0 ; i<=1 ; i = i + 0.01){
        setTimeout("seto(" + i + ")", i * 1000);
    }
}

function seto(i)
{
    el.style.opacity = i;
}

function fadeIn(el) {
    var go = function(j) {
       setTimeout( function(){ seto(el,j); } , j *1000);}
    };

    for (var i = 0 ; i<=1 ; i = i + 0.01) go(i);
}

function fin(){
    var i = 0;
    var el = document.getElementById("div1");
    fadeIn(el,i);
}

function fadeIn(el,i) {
    var go = function(i) {
        setTimeout( function(){ seto(el,i); } , i * 1000);
    };
    for ( i = 0 ; i<=1 ; i = i + 0.01) go(i);
}

function seto(el,i)
{
    el.style.opacity = i;
}