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。要了解为什么必须了解JavaScript中this代表的含义。我喜欢称它为函数调用对象，因为它最准确地描述它（在我看来）。有关详细信息，请参阅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之间的区别。

在方法内设置间隔

1 个答案: