如何让嵌入式函数多次运行

How to get an embedded function to run multiple times

本文关键字：运行 函数 嵌入式      更新时间：2023-09-26

我的问题是如何运行一个函数的多个实例。 这是我下面的函数 - 一个简单的淡入淡出函数。 我遇到的问题是，当第二次调用它时，它会放弃第一次调用。 因此，如果用户单击按钮，它将显示一条淡出的消息。

如果用户单击另一个按钮，则上一个淡入淡出的消息只会在当前不透明度级别停止。

？

停止机制是什么？ 以前的函数去哪儿了？

函数 

function newEffects(element, direction, max_time ) 
{
    newEffects.arrayHold = [];
    newEffects.arrayHold[element.id] = 0;
    function next() 
    {
        newEffects.arrayHold[element.id] += 10;
        if ( direction === 'up' )
        {
            element.style.opacity = newEffects.arrayHold[element.id] / max_time;
        }
        else if ( direction === 'down' )
        {
            element.style.opacity = ( max_time - newEffects.arrayHold[element.id] ) / max_time;
        }
        if ( newEffects.arrayHold[element.id] <= max_time ) 
        {
            setTimeout( next, 10 );
        }
    }
    next();
    return true;
};

呼唤

newEffects(this.element, 'down', 4000 );

旧对象

/**
 *    Effects - causes all elements that are fading to sync. to same opacity level as they share the same elapsed time.
 */
var Effects = function( element ) 
{
    this.element = element;
};
Effects.prototype.fade = function( direction, max_time ) 
{
    Effects.elapsed = 0;
    var persist_element = this.element;
    function next() 
    {
        Effects.elapsed += 10;
        if ( direction === 'up' )
        {
            persist_element.style.opacity = Effects.elapsed / max_time;
        }
        else if ( direction === 'down' )
        {
            persist_element.style.opacity = ( max_time - Effects.elapsed ) / max_time;
        }
        if ( Effects.elapsed <= max_time ) 
    {
            setTimeout( next, 10 );
        }
    }
    next();
    return true;
};

试试这个

function newEffects(element, direction, max_time ) 
{
    var mt=max_time;
    var dir=direction; 
    var el=document.getElementById(element);
    var newEffects={};
    newEffects.arrayHold = [];
    newEffects.arrayHold[el.id] = 0;
    function next() 
    {
        newEffects.arrayHold[el.id] += 10;
        if ( dir === 'up' )
        {
            el.style.opacity = newEffects.arrayHold[el.id] / mt;
        }
        else if ( dir === 'down' )
        {
            el.style.opacity = ( mt - newEffects.arrayHold[el.id] ) / mt;
        }
        if ( newEffects.arrayHold[el.id] <= mt ) 
        {
            setTimeout( next, 10 );
        }
    } next();
};

这里有一个例子。

在父函数中使用 var 关键字声明每个变量 保留每个项目的单独实例，这就是clouser的工作方式。

看起来您正在递归调用 next（）。 我很惊讶你的代码没有崩溃。

请考虑以下代码：

function foo() {
    foo.bar = 5;
    alert(foo.bar); // alerts 5
}
foo();
alert(foo.bar); // alerts 5 instead of undefined!

Foo 是一个具有属性的对象，但也可以作为函数调用。设置的任何属性都将保留，即使在函数调用之外也是如此。（事实上，这是一种制作 Javascript 伪类的方法，它对它自己的目的很有用。

相反，您可以做的是通过以下两种方式之一返回此"类"的新实例：

function fadeEffect(element) {
    this.element = element;
    this.fadeTimeLeft = 1000;
    this.fade = function() {
        this.fadeElement.style.opacity -= .01; // Replace with working
                                               // opacity decreaser.
        this.fadeTimeLeft -= 1;
        if (this.fadeTimeLeft > 0) {
            setTimeout(this.fade, 10);
        }
    }
}
signInButtonFade = new fadeEffect(document.getElementById("signinfade"));

或者用Javascript的对象文字表示法，你可能更了解JSON：

function fadeEffect(element) {
    return {
        "fadeElement": element,
        "fadeTimeLeft": 1000,
        "fade": function() {
            this.fadeElement.style.opacity -= .01; // Replace with working
                                                   // opacity decreaser.
            this.fadeTimeLeft -= 1;
            if (this.fadeTimeLeft > 0) {
                setTimeout(this.fade, 10);
            }
        },
        "init": function() {
            // When using this format, no code is executed automatically,
            // so we have a "constructor" that we execute manually when
            // making the object.
            this.fade();
        }
    }
}
signInButtonFade = generateFade();
signInButtonFade.init();

（显然，实际的不透明度降低不起作用。

还可以将这些淡入淡出效果

中的每一个存储在数组中，然后检查是否有任何以前的淡入淡出效果应用于元素。如果有，那么要么你可以阻止这种褪色，要么劫持它以另一种方式淡入淡出，或者完全其他东西。

fadeArray = new Array();
fadeArray.push(new fadeEffect(document.getElementById("fadeElement"));
// Do other adding fade stuff, etc...
// Now we add a new fade effect. This could easily be put into a function:
fadeEffectAlreadyExists = false;
for (i in fadeArray) {
    if (i.element == document.getElementById("fadeElement2")) {
        fadeEffectAlreadyExists = true;
        break;
    }
}
if (!fadeEffectAlreadyExists) {
    fadeArray.push(new fadeEffect(document.getElementById("fadeElement2")));
}

虽然这很好（在我看来，这是正确的方法），但您可以通过将函数体中的"newEffects"的每个实例替换为"this"来保留现有函数，然后使用fade = new newEffects(element, direction, max_time);因为它已经与第一种方法有很多共同点。

相关文章：