方法內的設置間隔

Question

再次處理我的框架。想要創建一種方法來閃爍一個元素。我需要在方法內設置間隔。所以我想這可能工作：

var optionalSelector = "$"; 

(function() { 
    (this[arguments[0]] = function constructor(input) { 
     if (!(this instanceof constructor)) { return new constructor(input); } 
     this.elm = document.getElementById(input); 
    }).prototype = { 
     blink:  function() { 
         function changeDisplay() { 
          if (this.elm.style.display != "none") { 
           this.elm.style.display = "none"; 
          } else { 
           this.elm.style.display = "block"; 
          } 
         } 
         setInterval(changeDisplay, 1000); 
        }, 
    }; 
})(optionalSelector); 

並調用方法$("anElmId").blink();

但事實並非如此。該方法內的另一個函數，也有一個間隔。我想這兩個東西搞砸了。像它不承認this.elm。由於我是新手，我無法找出解決這個問題的方法。有任何想法嗎？

Fiddle

Answer 1

你應該試着在你的代碼中的console.log語句。在Chrome或Firefox中（最好安裝Firebug插件）時，可以按F12打開控制檯並查看日誌輸出。

console.log(this) 

在changeDisplay就會發現，this最有可能的是Window。要理解爲什麼你必須瞭解什麼是this代表JavaScript。我喜歡稱它爲調用 對象的函數，因爲它最準確地描述它（在我看來）。有關更多詳細信息，請參閱here。

var optionalSelector = "$"; 
window[optionalSelector] = function constructor(input) { 
    if (!(this instanceof constructor)) { 
    return new constructor(input); 
    } 
    this.elm = document.getElementById(input); 
    this.intervalid = 0; 
    this.timeoutid = 0; 
}; 
window[optionalSelector].prototype.blink = 
    function(interval, timeout) { 
    this.intervalid = setInterval(this._callbacks. 
     changeDisplay(this.elm), interval); 
    this.timeoutid=setTimeout(this._callbacks. 
     cancelInterval(this.intervalid),timeout); 
    return this; 
}; 
window[optionalSelector].prototype.cancel = function() { 
    clearTimeout(this.timeoutid); 
    clearInterval(this.intervalid); 
    return this; 
}; 
// I like to have callback functions (closures) in it's own 
// scope so you can better control what variables 
// are passed to it 
window[optionalSelector].prototype._callbacks = { 
    changeDisplay: function(elm) { 
    return function() { 
     if (elm.style.display !== "none") { 
     elm.style.display = "none"; 
     } else { 
     elm.style.display = "block"; 
     } 
    }; 
    }, 
    cancelInterval:function(intervalid){ 
    return function(){ 
     clearInterval(intervalid); 
    }; 
    } 
}; 

var myBlinker = window[optionalSelector] 
    ("hplogo").blink(200, 2000); 
//cancel it 
myBlinker.cancel(); 
//blink something else for 2 seconds 
window[optionalSelector]("gbqfba").blink(200, 2000); 

去google.com按F12並運行上面的代碼。它應該工作。更多關於原型屬性和實例屬性here之間的區別。