Question

我遇到的问题是如何让多个函数实例运行。以下是我的功能 - 简单的淡入淡出功能。我遇到的问题是当它第二次被叫时它放弃了第一个电话。因此，如果用户点击某个按钮，它将显示一个消退的消息。

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

吗

什么是停止机制？以前的功能去了哪里？

功能

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

Answer 1

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

Answer 2

试试这个

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

一个例子是here。

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

Answer 3

考虑以下代码：

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

Foo是一个具有属性的对象，但也可以作为函数调用。即使在函数调用之外，任何已设置的属性都将保持不变。（事实上，这是一种制作Javascript pseudo-class的方法，这对自己的目的很有用。）

您可以做的是返回此“类”的新实例，采用以下两种方式之一：

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

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

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

3 个答案: