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

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

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

？

什么是停止机制？上一个函数去了哪里

功能

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;
};

旧对象

/**
 *    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;
};

/**
*效果-使所有淡入淡出的元素同步。到相同的不透明度级别，因为它们共享相同的运行时间。
*/
var效应=功能（元素）
{
this.element=元素；
};
Effects.prototype.fade=功能（方向、最大时间）
{
有效期=0；
var persist_element=this.element；
函数next（）
{
效应时间+=10；
如果（方向==“向上”）
{
persist_element.style.opacity=Effects.appeased/max_time；
}
否则，如果（方向==‘向下’）
{
persist_element.style.opacity=（max_time-Effects.appeased）/max_time；
}
if（Effects.appead看起来您是在递归调用next（）。我很惊讶您的代码没有崩溃。
试试这个

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();
};

函数newEffects（元素、方向、最长时间）
{
var mt=最大时间；
var dir=方向；
var el=document.getElementById（元素）；
var newEffects={}；
newEffects.arrayHold=[]；
newEffects.arrayHold[el.id]=0；
函数next（）
{
newEffects.arrayHold[el.id]+=10；
如果（dir==='up'）
{
el.style.opacity=newEffects.arrayHold[el.id]/mt；
}
如果为else（dir==='down'）
{
el.style.opacity=（mt-newEffects.arrayHold[el.id]）/mt；
}
如果（newEffects.arrayHold[el.id]考虑以下代码：

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

Foo是一个具有属性的对象，但也可以作为函数调用。设置的任何属性都将保持不变，即使在函数调用之外也是如此。（事实上，这是一种生成属性的方法，对其自身用途很有用。）

您可以通过以下两种方式之一返回此“类”的新实例：

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的对象文字表示法，您可能更了解：

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

您还可以将这些淡入淡出效果存储在数组中，然后检查是否有任何以前的淡入淡出效果应用于元素。如果有，则可以停止淡入淡出，或者以其他方式使其淡入淡出，或者完全其他方式

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=newnewEffects（元素、方向、最长时间）来保留现有函数
因为它与第一种方法有很多共同之处。
这是编写淡入淡出函数的最好方法，通过设置不透明度，而不是设置计时器在t时间后重新设置淡入淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出现在混浊应该同步…谢谢…你会考虑Sheikh Heera的方式另一个有效的方式吗？看来使用<代码> var >代码>关键字排序的“锚”将成员变量添加到函数的特定实例。虽然它确实有效，但
var
关键字是否能做到这一点可能并不明显。因此，使用
new
关键字的作用与在每个声明之前放置
var
相同。Javascript中的任何内容对我来说都不明显……这是一个rubicks多维数据集。欢迎来到编程世界：Pelement是元素…无需获取ElementById（元素）。编辑之前，我根据您的问题回答了它（仅作为函数），它在这里工作。谢谢，我非常感谢。：-）我为每个项目保留单独的不透明度级别，对吗？它在小提琴中也不起作用…将它们都设置为黑色，您将看到闪烁。。。
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")));
}