Skip to content

Instantly share code, notes, and snippets.

@k10526

k10526/demo1.html

Last active May 12, 2016 09:40
Show Gist options
  • Save k10526/08ab4d15e0bf755b283d4c2c05b59cff to your computer and use it in GitHub Desktop.
Save k10526/08ab4d15e0bf755b283d4c2c05b59cff to your computer and use it in GitHub Desktop.
Download ZIP
test
Raw
demo1.html
<html>
<body>
<button id='button'>up</button>
<div id='display'></div>
<script>
function coroutine(gen){
return function(...args){
const genObj = gen(...args);
genObj.next();
return genObj;
}
}
const print = coroutine(function* (){
const el = document.getElementById('display');
while(true){
const [data, attr] = yield;
el.style.fontSize = attr.fontSize||'medium';
el.style.color = attr.color||'#000000';
el.innerHTML = data;
}
});
const bigFont = coroutine(function* (target){
while(true){
const [data, attr] = yield;
if(data >= 10){
attr.fontSize = 'xx-large';
}
target.next([data, attr]);
}
});
const colorFont = coroutine(function* (target){
while(true){
const [data,attr] = yield;
if(data%2){
attr.color='#FF0000';
}
target.next([data,attr]);
}
});
const makeAttr = coroutine(function* (target){
while(true){
target.next([yield, {}]);
}
});
const incNumber = coroutine(function* (target){
while(true){
target.next((yield)+1);
}
});
const extractNumber = coroutine(function* (target){
const el = document.getElementById('display');
while(true){
yield;
target.next(Number(el.innerHTML||0));
}
});
const o = extractNumber(incNumber(makeAttr(colorFont(bigFont(print())))));
document.getElementById('button').addEventListener('click', function(){o.next()});
</script>
</body>
</html>
Raw
demo2.html
<html>
<body>
<div id = 'move' style="position:relative;width:500px;height:500px;border:1px solid #000000">
<div style="position:relative;top:10px;left:10px;width:50px;height:50px;border:1px solid #000000"></div>
<div style="position:relative;top:20px;left:10px;width:50px;height:50px;border:1px solid #000000"></div>
<div style="position:relative;top:30px;left:10px;width:50px;height:50px;border:1px solid #000000"></div>
<div style="position:relative;top:40px;left:10px;width:50px;height:50px;border:1px solid #000000"></div>
<div style="position:relative;top:50px;left:10px;width:50px;height:50px;border:1px solid #000000"></div>
<div style="position:relative;top:60px;left:10px;width:50px;height:50px;border:1px solid #000000"></div>
<div style="position:relative;top:70px;left:10px;width:50px;height:50px;border:1px solid #000000"></div>
</div>
<script>
class Task{
constructor(target){
this._target = target;
this._val = null;
this._stack = [];
}
run(){
const {value,done} = this._target.next(this._val);
if(done){
if(this._stack.length===0) return null;
this._val = null;
this._target = this._stack.pop();
}else if(value&&value.then){
return value;
}else if(value&&value[Symbol.iterator]){
this._stack.push(this._target);
this._val = null;
this._target = value;
}else{
this._val = value;
}
}
}
class Scheduler{
constructor(){
this._queue = [];
this._numTask = 0;
}
newTask(target){
this._numTask++;
this.schedule(new Task(target));
}
schedule(task){
this._queue.push(task);
}
loop(){
const r= _=>{
if(this._numTask){
while(this._queue.length){
const task = this._queue.shift();
const result = task.run();
if(result === null){
this._numTask--;
}else if(result&&result.then){
result.then(val=>{task._val=val;this.schedule(task)});
}else {
this.schedule(task);
}
}
setTimeout(r,15);
}
}
r();
}
}
function timeout(time){
return new Promise(function(res){setTimeout(res,time)});
}
function coroutine(gen){
return function(...args){
const genObj = gen(...args);
genObj.next();
return genObj;
}
}
const s = new Scheduler();
function* leftMoveBox(el){
let left = 0;
while(left<440){
left = left + 5;
el.style.left = left + 'px';
yield timeout(30);
}
}
function* rightMoveBox(el){
let left = 440;
while(left>0){
left = left -5;
el.style.left = left + 'px';
yield timeout(30);
}
}
function* leftRightMoveBox(el){
while(true){
yield coroutine(leftMoveBox)(el);
yield coroutine(rightMoveBox)(el)
}
}
s.newTask(function* (){console.log(1);yield timeout(100); console.log(2);yield;console.log(3)}());
s.newTask(function* (){console.log(1);const a = yield 2;console.log(a);yield;console.log(3)}());
s.newTask(coroutine(leftMoveBox)(document.getElementById('move').children[0]));
s.newTask(coroutine(rightMoveBox)(document.getElementById('move').children[1]));
s.newTask(coroutine(leftRightMoveBox)(document.getElementById('move').children[2]));
</script>
</body>
</html>
Raw
test.js
function* gen(){
//(A)
console.log('start');
yield 1; //(B)
console.log('end');
}
const g = gen();
g.next(); //{value: 1, done: false}
g.next(); //{value: undefined, done: true}
function* gen(){
yield 1;
yield 2;
yield 3;
}
for(const val of gen()){console.log(val)}
[...gen()]
function* naturalNumbers() {
var n = 1;
while(true){
yield n++;
}
}
function* c(arr,r,choice){
if(r===0) return yield choice;
if(arr.length ===0) return;
choice = choice.slice(0);
yield* c(arr.slice(1),r,choice)
choice.push(arr[0])
yield* c(arr.slice(1),r-1,choice)
}
[...c([1,2,3],2,[])]
function* foo() {
yield 'a';
yield 'b';
}
function* bar() {
yield 'x';
yield* foo();
yield 'y';
}
class BinaryTree {
constructor(value, left=null, right=null) {
this.value = value;
this.left = left;
this.right = right;
}
/** Prefix iteration */
* [Symbol.iterator]() {
yield this.value;
if (this.left) {
yield* this.left;
// Short for: yield* this.left[Symbol.iterator]()
}
if (this.right) {
yield* this.right;
}
}
}
const tree = new BinaryTree(1,
new BinaryTree(2,
new BinaryTree(4),
new BinaryTree(5)),
new BinaryTree(3),
new BinaryTree(6),
new BinaryTree(7));
for (const x of tree) {
console.log(x);
}
function* preorder(element){
yield element;
for(const e of Array.from(element.children))
yield* preorder(e)
}
[...preorder(document.body)]
function* take(iterable, n) {
for (const x of iterable) {
if (n <= 0) return;
n--;
yield x;
}
}
take(preorder(document.body), 10)
function* map(iterable, mapFunc) {
for (const x of iterable) {
yield mapFunc(x);
}
}
take(map(preorder(document.body), function(el){return el.tagName}),10);
function* filter(iterable, fn){
for (const i of iterable)
if(fn(i)) yield i;
}
take(map(filter(preorder(document.body),function(el){return el.tagName==='DIV'}), function(el){return el.tagName}),10);
arr = [1,2,3,4,5,6,7,8,9,10];
Array.prototype.take = function(n){
var res = [];
for(var i = 0; i < this.length && i < n; i++){
console.log('take:'+this[i]);
res.push(this[i])
}
return res;
}
arr.filter(function(v){console.log('filter:'+v);return v%2}).take(3);
function* take(iterable, n) {
for (const x of iterable) {
if (n <= 0) return;
n--;
console.log('take:'+n);
yield x;
}
}
function* filter(iterable, fn){
for (const i of iterable){
if(fn(i)) {
console.log('filter:'+i);
yield i;
}
}
}
[...take(filter(arr, function(i){return i%2}),3)]
function* gen() {
// (A)
while (true) {
try {
const input = yield; // (B)
console.log(input);
}catch(e){console.log(e)}
}
}
const g = gen();
g.next(1);
g.next(2);
g.throw(new Error());
g.return(0);
function coroutine(gen){
return function(...args){
const genObj = gen(...args);
genObj.next();
return genObj;
}
}
function* foo(){
const x = yield 2;
z++;
const y = yield (x * z);
console.log(x,y,z);
}
const it1 = foo();
const it2 = foo();
let val1 = it1.next().value;
let val2 = it2.next().value;
let z = 1;
console.log(val1,val2)
val1 = it1.next(val2 * 10).value;
val2 = it2.next(val1 * 5).value;
it1.next(val2/2);
it2.next(val1/4);
function co(genFunc) {
const genObj = genFunc();
step(genObj.next());
function step({value,done}) {
if (!done) {
value.then(result => {
step(genObj.next(result));
}).catch(error => {
step(genObj.throw(error));
});
}
}
}
co(function* () {
try {
const [a, b] = yield Promise.all([
fetch('a.json').then(request => request.text()),
fetch('b.json').then(request => request.text())
]);
console.log(a,b);
} catch (e) {
console.log('Failure to read: ' + e);
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment