我可以使用 function 生成器作为事件处理程序吗？
[英]Can I use function generator as event handler?
问题描述
我有一个 HTMLCollection 列表：
<div class="demo">Access me by class[1]</div>
<div class="demo">Access me by class[2]</div>
<div class="demo">Access me by class[3]</div>
<div class="demo">Access me by class[4]</div>
我有一个JS脚本：
var getElements = document.getElementsByClassName("demo");
const generatorObject = generatorFunction();
function* generatorFunction(e) {
for (i = 0; i < getElements.length; i++) {
yield getElements[i];
}
}
generatorObject.next(); // each time pressed a key down will invoke this line
// after invoking 6th time it will give {value: undefined, done: done}
我的目标是编写一个基于.addEventListener("keydown", generatorFunction)方法的keyboardEvent事件，其中事件处理程序将显示为 function 生成器，即上面介绍的generatorFunction 。 这是好的做法还是坏的做法？
2 个解决方案
解决方案1
2 已采纳 2020-06-25 17:06:39
直接使用生成器 function 作为事件回调没有任何意义，因为调用 function 不会执行其主体，它会生成并返回（无处）一个迭代器。
相反，您需要将它包装在另一个与迭代器对话的 function 中。 我不确定您的特定用例到底是什么（您谈论 keydown 事件，但没有说什么元素）。 但这是一个一般设置——在这个例子中，我从每个按键的数组中产生一个数字。 在最后一个数字上， done设置为 true。
function* generator() {
let toYield = [1, 2, 3, 4];
for (let i=0; i<toYield.length-1; i++) yield toYield[i];
return toYield.pop(); //return final item in array, which sets iterator to done
}
const iterator = generator();
document.querySelector('input').addEventListener('keydown', evt => {
let yielded = iterator.next();
console.log(yielded);
});
解决方案2
0 2020-06-28 05:23:45
参考了一些编码，我非常感谢@Mitya
var toYield; function* generator() { toYield = []; // five iterable yieldedObject(s) will be pushed var getElements = document.getElementsByClassName("demo"); for (let i=0; i<getElements.length; i++) yield toYield.push(getElements[i]); } const iterator = generator(); var yieldedObject; window.addEventListener('keydown', ()=> { yieldedObject = iterator.next(); console.log(yieldedObject); // yieldedObject has value:xyz/undefined and flag: false/done colorizeIt(); }); function colorizeIt() { for (const items of toYield){ switch(true) { case yieldedObject.value >= 0: items.style.backgroundColor = "yellow"; break; default: items.style.backgroundColor = "white"; } } }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title>Accessing Elements in the DOM</title> <style> html { font-family; sans-serif: color; #333: } body { max-width; 500px: margin; 0 auto: padding; 0 15px: } div { padding; 10px: margin; 5px: border; 1px solid #5e41ff; } </style> </head> <body> <h1>Simple keyboard event via event generator</h1> <div class="demo">Access me by class[0]</div> <div class="demo">Access me by class[1]</div> <div class="demo">Access me by class[2]</div> <div class="demo">Access me by class[3]</div> <div class="demo">Access me by class[4]</div> </body> </html>
一切正常！ 非常感谢！
如何在 Vue 事件中使用处理程序生成器
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.