setTimeout在同一類型的多個對象的方法中

我需要在相同類型的對象的方法中使用「setTimeout」的幫助。我使用此代碼來啓動我的對象：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

來源

2011-08-08 micnic

有幾種方式來處理這樣的事情，這裏只是我的頭頂。

首先，我看到你正在寫setTimeout的匿名函數。我發現將我的對象的方法綁定到其作用域並將其發送給setTimeout會更優雅。有很多方法可以實現連接，但很快bind（）將成爲標準（you can write this into your own support libraries yourself for browser compatibility）。以這種方式做事會使你的變量保持在它們自己的範圍內（全球範圍內沒有「那個」變量），並且要避免這樣的錯誤。例如：

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（），它可以幫助你確保一次只有一件事情正在進行，並且將你的代碼的行爲與狂熱的用戶點擊你所描述的一樣。

來源

2011-08-08 12:30:03 Chris

如果你需要的東西可以取消的，而不是使用的setTimeout window.setInterval。的setInterval返回的句柄，然後可以使用以後取消間隔的時間間隔：

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

// more code ... 

// later, to cancel this guy: 

window.clearInterval(global_intervalHandler);

所以從這裏我敢肯定，你可以用你的工程技能和創造力，使自己的自到期操作 - 如果他們執行併成功完成（甚至不成功）他們取消自己的時間間隔。如果另一個進程干預，它可以首先取消間隔並激發其行爲。

來源

2011-08-08 12:26:31 Brian

那麼，但setTimeout還會返回一個句柄，您可以使用該句柄通過使用clearTimeout來取消呼叫。 https://developer.mozilla.org/en/window.clearTimeout – DanNsk

你知道，我不知道爲什麼，但在我所有使用JavaScript的年代中，我從來沒有找過這個 - 我一直使用間隔來取消可用性。 +1。無論哪種方式 - 同樣的概念適用。捕獲句柄，確保它在操作之外的作用域中可用，並在需要時使用句柄來取消。 – Brian

您是否需要將其作爲全局變量？只需更改爲var that = this;即可在函數上下文中使用變量。

來源

2011-08-08 12:33:03 DanNsk

setTimeout在同一類型的多個對象的方法中

回答

相關問題