Javascript 函数被调用太多次

Question

我有一个函数，应该将数字递增 1在每次单击按钮时。该函数仅在第一次被调用时才能正常工作，然后由于该函数被调用太多次而数量大大增加。有人可以解释发生了什么，我该如何按照我已经使用的相同模式修复它？

'use strict';
var button = document.getElementsByClassName('button')[0],
    targetElement = document.getElementsByClassName('view-box')[0];

var NumView = function NumView(element, button) {
    this.element = element;
    this.button = button;
};

NumView.prototype.render = function render() {
      this.element.innerHTML = this.num;
      this.button.addEventListener('click', changeValue.bind(this));
      function changeValue() {
      this.num ++;
      this.render();
      }
};

var NumController = function NumController(numView) {
    this.numView = numView;
};

NumController.prototype.initialize = function initialize() {
    this.onLoadShowNum();
};

NumController.prototype.onLoadShowNum = function onLoadShowNum() {
    this.numView.num = 0;
    this.numView.render();
};

(function initialize() {
    var view = new NumView(targetElement, button),
        controller = new NumController(view);
    controller.initialize();
})();

.container {
    width: 100%;
    background: silver;
    text-align: center;
}

.view-box {
    border: 5px solid red;
    padding: 5px;
    background: white;
}

.button {
    line-height: 2.4;
    margin: 25px;
}

<section class="container">
<span class="view-box"></span>
<button class="button">Click!</button>
</section>

Answer 1

每次单击按钮时都会添加一个 eventListener。

就这样吧。

在第一次创建按钮时将按钮与点击事件绑定(bind)。

'use strict';
var button = document.getElementsByClassName('button')[0],
    targetElement = document.getElementsByClassName('view-box')[0];

var NumView = function NumView(element, button) {
    this.element = element;
    this.button = button;
    /* Place it here */
      this.button.addEventListener('click',         changeValue.bind(this));
      function changeValue() {
      this.num ++;
      this.render();
      }
};

NumView.prototype.render = function render() {
      this.element.innerHTML = this.num;
      /*Remove from here*/
      /*
      this.button.addEventListener('click',         changeValue.bind(this));
      function changeValue() {
      this.num ++;
      this.render();
      }
      //This is being called multiple times. 1 + 2 +3 +4+..
      */
};

var NumController = function NumController(numView) {
    this.numView = numView;
};

NumController.prototype.initialize = function initialize() {
    this.onLoadShowNum();
};

NumController.prototype.onLoadShowNum = function onLoadShowNum() {
    this.numView.num = 0;
    this.numView.render();
};

(function initialize() {
    var view = new NumView(targetElement, button),
        controller = new NumController(view);
    controller.initialize();
})();

.container {
    width: 100%;
    background: silver;
    text-align: center;
}

.view-box {
    border: 5px solid red;
    padding: 5px;
    background: white;
}

.button {
    line-height: 2.4;
    margin: 25px;
}

<section class="container">
<span class="view-box"></span>
<button class="button">Click!</button>
</section>