我可以使用 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.