Can I use function generator as event handler?
Question
I have a list of 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>
And I have a script of 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}
My goal is to write a keyboardEvent based on .addEventListener("keydown", generatorFunction) method whereby event handler would be presented as function generator ie generatorFunction presented above. Is it good or bad practice?
2 answers
solution1
2 ACCPTED 2020-06-25 17:06:39
Using a generator function directly as an event callback wouldn't make any sense because calling the function wouldn't execute its body, it would generate and return (to nowhere) an iterator.
Instead you'd need to wrap it in another function which talks to the iterator. I'm not sure exactly what your particular use case is (you talk about keydown events, but don't say on what element). But here's a general setup - in this example I'm yielding a number from an array on each keypress. On the final number, done is set to 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);
});
solution2
0 2020-06-28 05:23:45
Did a bit of coding with reference which I am very thankful for @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>
All worked just fine! Thanks a lot!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.