同一类型的多个对象的方法中的 setTimeout

Question

我需要在相同类型的对象的方法中使用“setTimeout”的帮助。我使用这段代码来启动我的对象：

    function myObject(param){

        this.content = document.createElement('div');
        this.content.style.opacity = 0;
        this.content.innerHTML = param;

        document.body.appendChild(this.content);

        this.show = function(){
            if(this.content.style.opacity < 1){
                this.content.style.opacity = (parseFloat(this.content.style.opacity) + 0.1).toFixed(1);
                that = this;
                setTimeout(function(){that.show();},100);
            }
        }

        this.hide = function(){
            if(this.content.style.opacity > 0){
                this.content.style.opacity = (parseFloat(this.content.style.opacity) - 0.1).toFixed(1);
                that = this;
                setTimeout(function(){that.hide();},100);
            }
        }
    }

在某处我有 2 个对象：

    obj1 = new myObject('Something here');
    obj2 = new myObject('Something else here');

在 HTML 代码中的某处我使用它们：

    <button onclick="obj1.show()">Something here</button>
    <button onclick="obj2.show()">Something else here</button>

当用户按下一个按钮时，一切都会正常，但如果用户按下一个按钮，并在很短的时间间隔后，他按下另一种是停止第一个按钮触发的动作，只执行第二个按钮的动作。 我知道全局变量“that”成为第二个对象的引用，但我不知道如何创建一个不会阻止先前调用的方法的自动机制。

预先感谢您，如果我犯了一些错误，请原谅我的英语：P

Answer 1

如果您需要可取消的内容，请使用 window.setInterval 而不是 setTimeout。 setInterval 返回间隔的句柄，然后可以使用该句柄稍后取消间隔：

var global_intervalHandler = window.setInterval(function() { ... }, millisecondsTotal);

// more code ...

// later, to cancel this guy:

window.clearInterval(global_intervalHandler);

因此，从这里开始，我确信您可以使用您的工程技能和创造力来进行自己的自过期操作 - 如果它们成功执行并完成（甚至不成功）他们取消了自己的间隔。如果另一个进程介入，它可以首先取消该间隔，然后触发其行为。

Answer 2

有几种方法可以处理这样的事情，这只是我想到的一种。

首先，我看到您正在编写匿名函数并将其放入 setTimeout 中。我发现将对象的方法绑定到其范围并将其发送到 setTimeout 更优雅。有很多方法可以进行连接，但很快 bind() 将成为标准（您可以自己将其写入自己的支持库以实现浏览器兼容性）。以这种方式执行操作将使您的变量保持在自己的作用域内（全局作用域中没有“那个”变量），并且大大有助于避免此类错误。例如：

function myObject(param){

    // ... snip

    this.show = function(){
        if(this.content.style.opacity < 1){
            this.content.style.opacity = (parseFloat(this.content.style.opacity) + 0.1).toFixed(1);
            setTimeout(this.show.bind(this),100);
        }
    }

    this.hide = function(){
        if(this.content.style.opacity > 0){
            this.content.style.opacity = (parseFloat(this.content.style.opacity) - 0.1).toFixed(1);
            setTimeout(this.hide.bind(this),100);
        }
    }
}

其次，您可能想向对象添加一些动画处理方法。 setTimeout 返回可用于取消计划回调的句柄。如果您实现像 this.registerTimeout() 和 this.cancelTimeout() 这样的东西，可以帮助您确保一次只发生一件事，并将代码的行为与您所描述的疯狂用户点击隔离开来。

Answer 3

您需要将其作为全局变量吗？只需更改为 var that = this; 您将在函数上下文内使用变量。