beautify 1st part of the tutorial
This commit is contained in:
parent
e3dd2cedc0
commit
6444024a9d
327 changed files with 2358 additions and 1986 deletions
|
@ -15,15 +15,15 @@
|
|||
Что выведет `alert` в коде ниже?
|
||||
|
||||
```js
|
||||
setTimeout(function() {
|
||||
alert(i);
|
||||
setTimeout(function() {
|
||||
alert( i );
|
||||
}, 100);
|
||||
|
||||
var i;
|
||||
|
||||
function hardWork() {
|
||||
function hardWork() {
|
||||
// время выполнения этого кода >100мс, сам код неважен
|
||||
for(i=0; i<1e8; i++) hardWork[i%2] = i;
|
||||
for (i = 0; i < 1e8; i++) hardWork[i % 2] = i;
|
||||
}
|
||||
|
||||
hardWork();
|
||||
|
|
|
@ -4,23 +4,23 @@
|
|||
|
||||
```js
|
||||
//+ run
|
||||
var timer = setInterval(function() {
|
||||
var timer = setInterval(function() {
|
||||
i++;
|
||||
}, 10);
|
||||
|
||||
setTimeout(function() {
|
||||
setTimeout(function() {
|
||||
clearInterval(timer);
|
||||
*!*
|
||||
alert(i); // (*)
|
||||
alert( i ); // (*)
|
||||
*/!*
|
||||
}, 50);
|
||||
|
||||
var i;
|
||||
|
||||
function f() {
|
||||
function f() {
|
||||
// точное время выполнения не играет роли
|
||||
// здесь оно заведомо больше 100мс
|
||||
for(i=0; i<1e8; i++) f[i%2] = i;
|
||||
for (i = 0; i < 1e8; i++) f[i % 2] = i;
|
||||
}
|
||||
|
||||
f();
|
||||
|
|
|
@ -28,15 +28,15 @@ var timer = setInterval(function() { // планируем setInterval кажд
|
|||
setTimeout(function() { // через 50мс - отмена setInterval
|
||||
clearInterval(timer);
|
||||
*!*
|
||||
alert(i); // (*)
|
||||
alert( i ); // (*)
|
||||
*/!*
|
||||
}, 50);
|
||||
|
||||
// и запускаем тяжёлую функцию
|
||||
function f() {
|
||||
function f() {
|
||||
// точное время выполнения не играет роли
|
||||
// здесь оно заведомо больше 100мс
|
||||
for(i=0; i<1e8; i++) f[i%2] = i;
|
||||
for (i = 0; i < 1e8; i++) f[i % 2] = i;
|
||||
}
|
||||
|
||||
f();
|
||||
|
|
|
@ -12,16 +12,16 @@ function Runner() {
|
|||
this.steps = 0;
|
||||
|
||||
this.step = function() {
|
||||
this.doSomethingHeavy();
|
||||
this.doSomethingHeavy();
|
||||
this.steps++;
|
||||
};
|
||||
|
||||
function fib(n) {
|
||||
return n <= 1 ? n : fib(n-1) + fib(n-2);
|
||||
return n <= 1 ? n : fib(n - 1) + fib(n - 2);
|
||||
}
|
||||
|
||||
this.doSomethingHeavy = function() {
|
||||
for(var i=0; i<25; i++) {
|
||||
for (var i = 0; i < 25; i++) {
|
||||
this[i] = fib(i);
|
||||
}
|
||||
};
|
||||
|
@ -45,8 +45,8 @@ var t2 = setTimeout(function go() {
|
|||
setTimeout(function() {
|
||||
clearInterval(t1);
|
||||
clearTimeout(t2);
|
||||
alert(runner1.steps);
|
||||
alert(runner2.steps);
|
||||
alert( runner1.steps );
|
||||
alert( runner2.steps );
|
||||
}, 5000);
|
||||
```
|
||||
|
||||
|
|
|
@ -28,8 +28,8 @@ setTimeout(function go() {
|
|||
}, 15);
|
||||
|
||||
setTimeout(function() {
|
||||
alert(runner1.steps);
|
||||
alert(runner2.steps);
|
||||
alert( runner1.steps );
|
||||
alert( runner2.steps );
|
||||
}, 5000);
|
||||
```
|
||||
|
||||
|
|
|
@ -18,7 +18,7 @@ function delay(f, ms) {
|
|||
}
|
||||
|
||||
function f(x) {
|
||||
alert(x);
|
||||
alert( x );
|
||||
}
|
||||
|
||||
var f1000 = delay(f, 1000);
|
||||
|
@ -36,7 +36,7 @@ return function() {
|
|||
var savedArgs = arguments;
|
||||
|
||||
setTimeout(function() {
|
||||
f.apply(savedThis , savedArgs);
|
||||
f.apply(savedThis, savedArgs);
|
||||
}, ms);
|
||||
};
|
||||
```
|
||||
|
|
|
@ -8,7 +8,7 @@
|
|||
|
||||
```js
|
||||
function f(x) {
|
||||
alert(x);
|
||||
alert( x );
|
||||
}
|
||||
|
||||
var f1000 = delay(f, 1000);
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
|
||||
|
||||
```js
|
||||
//+ run
|
||||
//+ run no-beautify
|
||||
function debounce(f, ms) {
|
||||
|
||||
var state = null;
|
||||
|
|
|
@ -9,6 +9,7 @@
|
|||
Например:
|
||||
|
||||
```js
|
||||
//+ no-beautify
|
||||
function f() { ... }
|
||||
|
||||
var f = debounce(f, 1000);
|
||||
|
|
|
@ -2,32 +2,32 @@
|
|||
|
||||
```js
|
||||
function throttle(func, ms) {
|
||||
|
||||
|
||||
var isThrottled = false,
|
||||
savedArgs,
|
||||
savedThis;
|
||||
|
||||
|
||||
function wrapper() {
|
||||
|
||||
|
||||
if (isThrottled) { // (2)
|
||||
savedArgs = arguments;
|
||||
savedThis = this;
|
||||
return;
|
||||
}
|
||||
|
||||
func.apply(this, arguments); // (1)
|
||||
|
||||
|
||||
func.apply(this, arguments); // (1)
|
||||
|
||||
isThrottled = true;
|
||||
|
||||
|
||||
setTimeout(function() {
|
||||
isThrottled = false; // (3)
|
||||
if (savedArgs) {
|
||||
wrapper.apply(savedThis, savedArgs);
|
||||
savedArgs = savedThis = null;
|
||||
}
|
||||
}, ms);
|
||||
}, ms);
|
||||
}
|
||||
|
||||
|
||||
return wrapper;
|
||||
}
|
||||
```
|
||||
|
|
|
@ -35,7 +35,9 @@
|
|||
Пример использования:
|
||||
|
||||
```js
|
||||
var f = function(a) { console.log(a) };
|
||||
var f = function(a) {
|
||||
console.log(a)
|
||||
};
|
||||
|
||||
// затормозить функцию до одного раза в 1000 мс
|
||||
var f1000 = throttle(f, 1000);
|
||||
|
|
|
@ -10,7 +10,7 @@
|
|||
Синтаксис:
|
||||
|
||||
```js
|
||||
var timerId = setTimeout(func/code, delay[, arg1, arg2...])
|
||||
var timerId = setTimeout(func / code, delay[, arg1, arg2...])
|
||||
```
|
||||
|
||||
Параметры:
|
||||
|
@ -31,8 +31,8 @@ var timerId = setTimeout(func/code, delay[, arg1, arg2...])
|
|||
|
||||
```js
|
||||
//+ run
|
||||
function func() {
|
||||
alert('Привет');
|
||||
function func() {
|
||||
alert( 'Привет' );
|
||||
}
|
||||
|
||||
*!*
|
||||
|
@ -44,12 +44,12 @@ setTimeout(func, 1000);
|
|||
|
||||
```js
|
||||
//+ run
|
||||
function func(phrase, who) {
|
||||
alert(phrase + ', ' + who);
|
||||
function func(phrase, who) {
|
||||
alert( phrase + ', ' + who );
|
||||
}
|
||||
|
||||
*!*
|
||||
setTimeout(func, 1000, "Привет", "Вася"); // Привет, Вася
|
||||
setTimeout(func, 1000, "Привет", "Вася"); // Привет, Вася
|
||||
*/!*
|
||||
```
|
||||
|
||||
|
@ -58,7 +58,7 @@ setTimeout(func, 1000, "Привет", "Вася"); // Привет, Вася
|
|||
То есть такая запись тоже сработает:
|
||||
|
||||
```js
|
||||
//+ run
|
||||
//+ run no-beautify
|
||||
setTimeout("alert('Привет')", 1000);
|
||||
```
|
||||
|
||||
|
@ -67,7 +67,7 @@ setTimeout("alert('Привет')", 1000);
|
|||
Вместо них используйте анонимные функции, вот так:
|
||||
|
||||
```js
|
||||
//+ run
|
||||
//+ run no-beautify
|
||||
setTimeout(function() { alert('Привет') }, 1000);
|
||||
```
|
||||
|
||||
|
@ -85,7 +85,7 @@ clearTimeout(timerId);
|
|||
В следующем примере мы ставим таймаут, а затем удаляем (передумали). В результате ничего не происходит.
|
||||
|
||||
```js
|
||||
//+ run
|
||||
//+ run no-beautify
|
||||
var timerId = setTimeout(function() { alert(1) }, 1000);
|
||||
alert(timerId); // число - идентификатор таймера
|
||||
|
||||
|
@ -104,7 +104,7 @@ alert(timerId); // всё ещё число, оно не обнуляется п
|
|||
Метод `setInterval` имеет синтаксис, аналогичный `setTimeout`.
|
||||
|
||||
```js
|
||||
var timerId = setInterval(func/code, delay[, arg1, arg2...])
|
||||
var timerId = setInterval(func / code, delay[, arg1, arg2...])
|
||||
```
|
||||
|
||||
Смысл аргументов -- тот же самый. Но, в отличие от `setTimeout`, он запускает выполнение функции не один раз, а регулярно повторяет её через указанный интервал времени. Остановить исполнение можно вызовом `clearInterval(timerId)`.
|
||||
|
@ -114,14 +114,14 @@ var timerId = setInterval(func/code, delay[, arg1, arg2...])
|
|||
```js
|
||||
//+ run
|
||||
// начать повторы с интервалом 2 сек
|
||||
var timerId = setInterval(function() {
|
||||
alert("тик");
|
||||
var timerId = setInterval(function() {
|
||||
alert( "тик" );
|
||||
}, 2000);
|
||||
|
||||
// через 5 сек остановить повторы
|
||||
setTimeout(function() {
|
||||
setTimeout(function() {
|
||||
clearInterval(timerId);
|
||||
alert('стоп');
|
||||
alert( 'стоп' );
|
||||
}, 5000);
|
||||
```
|
||||
|
||||
|
@ -141,12 +141,12 @@ setTimeout(function() {
|
|||
```js
|
||||
/** вместо:
|
||||
var timerId = setInterval(function() {
|
||||
alert("тик");
|
||||
alert( "тик" );
|
||||
}, 2000);
|
||||
*/
|
||||
|
||||
var timerId = setTimeout(function tick() {
|
||||
alert("тик");
|
||||
alert( "тик" );
|
||||
*!*
|
||||
timerId = setTimeout(tick, 2000);
|
||||
*/!*
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue