1

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

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

?

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

功能

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

3 回答 3

1

尝试这个

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 的工作方式。

于 2012-04-07T17:52:41.643 回答
1

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

于 2012-04-07T17:26:50.507 回答
1

考虑这段代码：

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

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

于 2012-04-07T18:13:04.167 回答