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

某处我有两个物体：

    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”成为第二个对象的refence，但我不知道如何创建一个不会阻塞以前调用的方法的自动机制。

如果我犯了一些错误，请提前谢谢你，对不起我的英语：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（）将成为标准（you can write this into your own support libraries yourself for browser compatibility）。以这种方式做事会使你的变量保持在自己的范围内（在全局范围内没有“那个”变量），并且可以大大避免像这样的bug。例如：

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;，您将在函数上下文中使用变量。

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

3 个答案: