javascript - 如何消除不透明度淡化中未使用的参数？

Question

element 被调用但从未使用过，它们只是被传递回另一个函数调用。这似乎是一种浪费，有没有更好的方法来做到这一点？

初始调用

fadeUp( document.getElementById( 'test' ), 3000 );

将元素的不透明度淡化 3000 毫秒

function fadeUp( element, max_time )
{
    var opacity = 0;
    if( fadeUp.elapsed === undefined )
    {
        fadeUp.elapsed = 0;
    }
    fadeUp.elapsed += 10;
    opacity = fadeUp.elapsed / max_time; 
    setTimeout(function(){callBack( element, max_time, fadeUp.elapsed, opacity );},fadeUp.elapsed);
}

function callBack( element, max_time, elapsed, opacity )
{
    element.style.opacity = opacity;
    if( elapsed <= max_time )
    {
        fadeUp( element, max_time );
    }
    else
    {
        fadeUp.elapsed = undefined;
    }
}

相关

How to create an opacity fade()? ( improvement over jQuery)

Answer 1

回调函数中使用了 element 参数。如果您从 fadeUp() 函数中删除它，那么回调函数将无法使用它，您的代码将无法运行。这是传递 element 以在回调中使用的正确方法，没有更好的方法将该参数传递给回调函数。

如果我按照您的尝试去做，那么我认为您可以使用不使用静态变量的更简单的代码:

function fadeUp( element, max_time ) {
    var elapsed = 0;

    function next() {
        elapsed += 10;
        element.style.opacity = Math.min(elapsed / max_time, 1);
        if (elapsed <= max_time) {
            setTimeout(next, 10);
        }
    }
    next();
}

你可以在这里看到它的工作:http://jsfiddle.net/jfriend00/FHq6B/ .

这使用局部函数和局部变量，没有静态变量。

并且，使用实际耗时来计算淡入淡出量的稍微更准确的版本如下所示:

function fadeUp( element, max_time ) {
    var startTime = (new Date()).getTime();

    function next() {
        var elapsed = (new Date()).getTime() - startTime;
        element.style.opacity = Math.min(elapsed / max_time, 1);
        if (elapsed <= max_time) {
            setTimeout(next, 10);
        }
    }
    next();
}

这个可以在这里看到:http://jsfiddle.net/jfriend00/g98Tv/ .

请注意，使用实际耗时的额外准确性对于淡入淡出动画可能不明显，但对于其他类型的动画可能会很明显，这就是我将其包含在这里的原因。