92 lines
1.9 KiB
HTML
92 lines
1.9 KiB
HTML
|
<!doctype html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<title>Zones throttle</title>
|
||
|
|
<link rel="stylesheet" href="css/style.css">
|
||
|
|
<script src="../dist/zone.js"></script>
|
||
|
|
<script src="../dist/long-stack-trace-zone.js"></script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>Throttle Example</h1>
|
||
|
|
|
||
|
|
<button id="b2">Error</button>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
/*
|
||
|
|
* In this example, we have a button that makes some request
|
||
|
|
* to our server. We want to only make the request once per
|
||
|
|
* 1s, so we use a `throttle` helper. If the request fails,
|
||
|
|
* it's difficult to see where the failure originated from.
|
||
|
|
*
|
||
|
|
* Thankfully, we can use zones to preserve the stack even
|
||
|
|
* across async tasks to get a better picture of the control
|
||
|
|
* flow of the app.
|
||
|
|
*/
|
||
|
|
|
||
|
|
var throttleMakeRequest;
|
||
|
|
|
||
|
|
/*
|
||
|
|
* Start the app
|
||
|
|
* Bind listeners
|
||
|
|
*/
|
||
|
|
function bootstrap () {
|
||
|
|
b2.addEventListener('click', throttleMakeRequest);
|
||
|
|
}
|
||
|
|
|
||
|
|
/*
|
||
|
|
* Makes a request to the server
|
||
|
|
* Will only make the request once every 1000ms
|
||
|
|
*/
|
||
|
|
throttleMakeRequest = throttle(function () {
|
||
|
|
makeRequestToServer(handleServerResponse);
|
||
|
|
}, 1000);
|
||
|
|
|
||
|
|
|
||
|
|
/*
|
||
|
|
* Pretend this makes a request to a server
|
||
|
|
*/
|
||
|
|
function makeRequestToServer (cb) {
|
||
|
|
setTimeout(cb, 100);
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
function handleServerResponse (err, data) {
|
||
|
|
throw new Error('Oops');
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/*
|
||
|
|
* Returns a fn that can only be called once
|
||
|
|
* per `time` milliseconds
|
||
|
|
*/
|
||
|
|
function throttle (fn, time) {
|
||
|
|
var id = null;
|
||
|
|
if (typeof time !== 'number') {
|
||
|
|
time = 0;
|
||
|
|
}
|
||
|
|
return function () {
|
||
|
|
if (!id) {
|
||
|
|
id = setTimeout(function () {
|
||
|
|
id = null;
|
||
|
|
fn();
|
||
|
|
}, time);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
/*
|
||
|
|
* Start the application
|
||
|
|
*
|
||
|
|
* If we start the application with `zone.run`, we
|
||
|
|
* get long stack traces in the console!
|
||
|
|
*/
|
||
|
|
|
||
|
|
//bootstrap();
|
||
|
|
Zone.current.fork(Zone.longStackTraceZoneSpec).run(bootstrap);
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|