Skip to content

Instantly share code, notes, and snippets.

@mezigh

mezigh/index.html

Created June 12, 2015 11:09
Show Gist options
  • Save mezigh/41025c2c82ac718815ca to your computer and use it in GitHub Desktop.
Save mezigh/41025c2c82ac718815ca to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin the Promise in JS and the Observable RxJS // source http://jsbin.com/zuquce
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/2.3.22/rx.all.js"></script>
<meta name="description" content="the Promise in JS and the Observable RxJS">
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body style="font-family: sans-serif;">
<!--<button id="trigger">Click It</button>
<div id="log"><h1>Logs:</h1></div> -->
<label for="theKeys">Texte</label>
<input type="text" id="theKeys" name="theKeys">
<div id="results">
</div>
<script id="jsbin-javascript">
console.clear();
/*
var comptePromesse = 0;
var sentence = "On verra bien à la fin!";
var triggy = document.getElementById('trigger');
triggy.addEventListener('click', testPromise);
function testPromise() {
console.log('start at -> ' +new Date().getSeconds());
var thisComptePromesse = ++comptePromesse;
var log = document.getElementById('log');
log.insertAdjacentHTML('beforeend', thisComptePromesse +
') Handling Started (<small>Début du code synchrone</small>)<br/>');
var p1 = new Promise(
function(resolve, reject) {
var mot1 = ') Promise started (<small>Début du code asynchrone</small>)<br/>';
log.insertAdjacentHTML('beforeend', thisComptePromesse + mot1);
// un code asynchrone
window.setTimeout(
function() {
resolve(thisComptePromesse);
}, 3000);
});
p1.then(
function(val) {
console.log('then -> ' + new Date().getSeconds());
var mot2 = ') Promise fulfilled (<small>Fin du code asynchrone</small>)<br/>';
log.insertAdjacentHTML('beforeend', val + mot2 );
}).catch(function() { console.log("promesse rompue");});
log.insertAdjacentHTML('beforeend', thisComptePromesse +
') Promise made (<small>Fin du code synchrone</small>)<br/>');
} */
/*
var dataSrc = ["c'est parti mon kiki","on est parti", "on est arrivé","on stoppe tout"];
Array.observe(dataSrc, function(changes) {
var sub = source.subscribe(
function (x) {
console.log('PRE-Next: ' + x );
},
function (err) {
console.log('Error: ' + err + " CAUGHT");
},
function () {
console.log('Completed');
});
});
var source = Rx.Observable.create(function (observer) {
try {
dataSrc.forEach(function(el) {
observer.onNext(el);
});
//throw "VERY BAD THINGS";
observer.completed();
} catch(e) {
observer.onError(e);
}
return function () {
console.log("DISPOSE METHOD");
};
});
*/
/*********************************/
/* Search terms in Wikipedia Api */
/*********************************/
/*
var $input = $('#theKeys'),
$results = $('#results');
var keyups = Rx.Observable.fromEvent($input, 'keyup')
.map(function (e) {
return e.target.value;
})
.filter(function (text) {
return text.length > 2;
});
var debounced = keyups
.debounce(50);
var distinct = debounced
.distinctUntilChanged();
function searchWikipedia (term) {
return $.ajax({
url: 'http://en.wikipedia.org/w/api.php',
dataType: 'jsonp',
data: {
action: 'opensearch',
format: 'json',
search: term
}
}).promise();
}
var suggestions = distinct
.flatMapLatest(searchWikipedia);
suggestions.forEach(
function (data) {
$results
.empty()
.append ($.map(data[1], function (value) {
return $('<li>').text(value);
}));
},
function (error) {
$results
.empty()
.append($('<li>'))
.text('Error:' + error);
});
*/
var requestStream = Rx.Observable.just('https://api.github.com/users');
var responseStream = requestStream
.flatMap(function (requestUrl) {
return Rx.Observable.fromPromise(jQuery.getJSON(requestUrl));
});
responseStream.subscribe(
function (response) {
response.forEach(function (el) {
$("#results").append("<li>"+el.login+ " : " + el.id +"</li>");
});
}
);
</script>
<script id="jsbin-source-javascript" type="text/javascript">console.clear();
/*
var comptePromesse = 0;
var sentence = "On verra bien à la fin!";
var triggy = document.getElementById('trigger');
triggy.addEventListener('click', testPromise);
function testPromise() {
console.log('start at -> ' +new Date().getSeconds());
var thisComptePromesse = ++comptePromesse;
var log = document.getElementById('log');
log.insertAdjacentHTML('beforeend', thisComptePromesse +
') Handling Started (<small>Début du code synchrone</small>)<br/>');
var p1 = new Promise(
function(resolve, reject) {
var mot1 = ') Promise started (<small>Début du code asynchrone</small>)<br/>';
log.insertAdjacentHTML('beforeend', thisComptePromesse + mot1);
// un code asynchrone
window.setTimeout(
function() {
resolve(thisComptePromesse);
}, 3000);
});
p1.then(
function(val) {
console.log('then -> ' + new Date().getSeconds());
var mot2 = ') Promise fulfilled (<small>Fin du code asynchrone</small>)<br/>';
log.insertAdjacentHTML('beforeend', val + mot2 );
}).catch(function() { console.log("promesse rompue");});
log.insertAdjacentHTML('beforeend', thisComptePromesse +
') Promise made (<small>Fin du code synchrone</small>)<br/>');
} */
/*
var dataSrc = ["c'est parti mon kiki","on est parti", "on est arrivé","on stoppe tout"];
Array.observe(dataSrc, function(changes) {
var sub = source.subscribe(
function (x) {
console.log('PRE-Next: ' + x );
},
function (err) {
console.log('Error: ' + err + " CAUGHT");
},
function () {
console.log('Completed');
});
});
var source = Rx.Observable.create(function (observer) {
try {
dataSrc.forEach(function(el) {
observer.onNext(el);
});
//throw "VERY BAD THINGS";
observer.completed();
} catch(e) {
observer.onError(e);
}
return function () {
console.log("DISPOSE METHOD");
};
});
*/
/*********************************/
/* Search terms in Wikipedia Api */
/*********************************/
/*
var $input = $('#theKeys'),
$results = $('#results');
var keyups = Rx.Observable.fromEvent($input, 'keyup')
.map(function (e) {
return e.target.value;
})
.filter(function (text) {
return text.length > 2;
});
var debounced = keyups
.debounce(50);
var distinct = debounced
.distinctUntilChanged();
function searchWikipedia (term) {
return $.ajax({
url: 'http://en.wikipedia.org/w/api.php',
dataType: 'jsonp',
data: {
action: 'opensearch',
format: 'json',
search: term
}
}).promise();
}
var suggestions = distinct
.flatMapLatest(searchWikipedia);
suggestions.forEach(
function (data) {
$results
.empty()
.append ($.map(data[1], function (value) {
return $('<li>').text(value);
}));
},
function (error) {
$results
.empty()
.append($('<li>'))
.text('Error:' + error);
});
*/
var requestStream = Rx.Observable.just('https://api.github.com/users');
var responseStream = requestStream
.flatMap(function (requestUrl) {
return Rx.Observable.fromPromise(jQuery.getJSON(requestUrl));
});
responseStream.subscribe(
function (response) {
response.forEach(function (el) {
$("#results").append("<li>"+el.login+ " : " + el.id +"</li>");
});
}
);
</script></body>
</html>
Raw
jsbin.zuquce.js
console.clear();
/*
var comptePromesse = 0;
var sentence = "On verra bien à la fin!";
var triggy = document.getElementById('trigger');
triggy.addEventListener('click', testPromise);
function testPromise() {
console.log('start at -> ' +new Date().getSeconds());
var thisComptePromesse = ++comptePromesse;
var log = document.getElementById('log');
log.insertAdjacentHTML('beforeend', thisComptePromesse +
') Handling Started (<small>Début du code synchrone</small>)<br/>');
var p1 = new Promise(
function(resolve, reject) {
var mot1 = ') Promise started (<small>Début du code asynchrone</small>)<br/>';
log.insertAdjacentHTML('beforeend', thisComptePromesse + mot1);
// un code asynchrone
window.setTimeout(
function() {
resolve(thisComptePromesse);
}, 3000);
});
p1.then(
function(val) {
console.log('then -> ' + new Date().getSeconds());
var mot2 = ') Promise fulfilled (<small>Fin du code asynchrone</small>)<br/>';
log.insertAdjacentHTML('beforeend', val + mot2 );
}).catch(function() { console.log("promesse rompue");});
log.insertAdjacentHTML('beforeend', thisComptePromesse +
') Promise made (<small>Fin du code synchrone</small>)<br/>');
} */
/*
var dataSrc = ["c'est parti mon kiki","on est parti", "on est arrivé","on stoppe tout"];
Array.observe(dataSrc, function(changes) {
var sub = source.subscribe(
function (x) {
console.log('PRE-Next: ' + x );
},
function (err) {
console.log('Error: ' + err + " CAUGHT");
},
function () {
console.log('Completed');
});
});
var source = Rx.Observable.create(function (observer) {
try {
dataSrc.forEach(function(el) {
observer.onNext(el);
});
//throw "VERY BAD THINGS";
observer.completed();
} catch(e) {
observer.onError(e);
}
return function () {
console.log("DISPOSE METHOD");
};
});
*/
/*********************************/
/* Search terms in Wikipedia Api */
/*********************************/
/*
var $input = $('#theKeys'),
$results = $('#results');
var keyups = Rx.Observable.fromEvent($input, 'keyup')
.map(function (e) {
return e.target.value;
})
.filter(function (text) {
return text.length > 2;
});
var debounced = keyups
.debounce(50);
var distinct = debounced
.distinctUntilChanged();
function searchWikipedia (term) {
return $.ajax({
url: 'http://en.wikipedia.org/w/api.php',
dataType: 'jsonp',
data: {
action: 'opensearch',
format: 'json',
search: term
}
}).promise();
}
var suggestions = distinct
.flatMapLatest(searchWikipedia);
suggestions.forEach(
function (data) {
$results
.empty()
.append ($.map(data[1], function (value) {
return $('<li>').text(value);
}));
},
function (error) {
$results
.empty()
.append($('<li>'))
.text('Error:' + error);
});
*/
var requestStream = Rx.Observable.just('https://api.github.com/users');
var responseStream = requestStream
.flatMap(function (requestUrl) {
return Rx.Observable.fromPromise(jQuery.getJSON(requestUrl));
});
responseStream.subscribe(
function (response) {
response.forEach(function (el) {
$("#results").append("<li>"+el.login+ " : " + el.id +"</li>");
});
}
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment