Question

我试图使用生成器创建一个计数器，用户将点击该按钮，计数值将增加。当我试图获得该功能时，我没有得到那个。我错过了什么。

先谢谢

的index.html

  <div class="counter">
     <div id="count-gen">0</div>
     <button onclick="countGen()">Count</button>
    </div>

index.js

 function* countGen(){
    let count =0;
    let nextValue = yield count++
    document.getElementById('count-gen').innerHTML = nextValue
  }

Answer 1

你已经把两件事分开了：你的生成器和使用你的生成器的事件处理程序。您还需要使用生成器的迭代器：

生成器（注意循环）：

function* countGen() {
  let count = 0;
  while (true) {
    yield ++count;
  }
}

（我也把它作为预增量，因为你似乎想从1开始。）

获取迭代器：

const count = countGen();

使用迭代器：

function handler() {
  document.getElementById('count-gen').innerHTML = count.next().value;
}

直播示例：

function* countGen() {
  let count = 0;
  while (true) {
    yield ++count;
  }
}

const count = countGen();

function handler() {
  document.getElementById('count-gen').innerHTML = count.next().value;
}

document.querySelector("button").addEventListener("click", handler);

<div class="counter">
  <div id="count-gen">0</div>
  <button>Count</button>
</div>

（该示例还使用addEventListener而不是onxyz - 属性处理程序。）

ES6 - 用于计数的发电机

1 个答案: