jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

images to svg

Browse source
This commit is contained in:
Ilya Kantor 2019-07-28 15:42:37 +03:00
parent a31e881856
commit 3ba28aa104
734 changed files with 11682 additions and 245 deletions
Download patch file Download diff file Expand all files Collapse all files

4
1-js/06-advanced-functions/08-settimeout-setinterval/article.md
View file

@ -200,7 +200,7 @@ setTimeout(function run() {
For `setInterval` the internal scheduler will run `func(i)` every 100ms:
![](setinterval-interval.png)
![](setinterval-interval.svg)
Did you notice?
@ -216,7 +216,7 @@ In the edge case, if the function always executes longer than `delay` ms, then t
And here is the picture for the recursive `setTimeout`:
![](settimeout-interval.png)
![](settimeout-interval.svg)
**The recursive `setTimeout` guarantees the fixed delay (here 100ms).**

BIN
1-js/06-advanced-functions/08-settimeout-setinterval/setinterval-interval.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 7.7 KiB

40
1-js/06-advanced-functions/08-settimeout-setinterval/setinterval-interval.svg Normal file
View file

@ -0,0 +1,40 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="566px" height="173px" viewBox="0 0 566 173" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>setinterval-interval.svg</title>
<desc>Created with sketchtool.</desc>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="setinterval-interval.svg">
<path d="M10.5,104 L560.5,104" id="Line" stroke="#BCA68E" stroke-width="2" stroke-linecap="square"></path>
<rect id="Rectangle-1" stroke="#BCA68E" stroke-width="2" fill="#FFFFFF" x="110" y="89" width="88" height="28"></rect>
<text id="func(1)" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="131" y="107">func(1)</tspan>
</text>
<path d="M118.911364,26.4383562 L126.490909,10.2739726 L106.470455,31.0958904 L116.193182,34 L110.286364,49.890411 L128.581818,29.3424658 L118.911364,26.4383562 Z M123.302273,14.9315068 L117.604545,27.0410959 L126.856818,29.7808219 L112.9,45.6164384 L117.447727,33.3972603 L108.195455,30.6575342 L123.302273,14.9315068 Z" id="Shape" stroke="#EE6B47" stroke-width="3" fill="#EE6B47" stroke-linecap="square"></path>
<path d="M109,137.5 L109,67.5" id="Line" stroke="#BCA68E" stroke-width="2" stroke-linecap="square"></path>
<rect id="Rectangle-1" stroke="#BCA68E" stroke-width="2" fill="#FFFFFF" x="253" y="89" width="88" height="28"></rect>
<text id="func(2)" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="274" y="107">func(2)</tspan>
</text>
<path d="M271.581818,29.3424658 L261.911364,26.4383562 L269.490909,10.2739726 L249.470455,31.0958904 L259.193182,34 L253.286364,49.890411 L271.581818,29.3424658 L271.581818,29.3424658 Z M251.195455,30.6575342 L266.302273,14.9315068 L260.604545,27.0410959 L269.856818,29.7808219 L255.9,45.6164384 L260.447727,33.3972603 L251.195455,30.6575342 L251.195455,30.6575342 Z" id="Shape" stroke="#EE6B47" stroke-width="3" fill="#EE6B47" stroke-linecap="square"></path>
<path d="M252,137.5 L252,67.5" id="Line" stroke="#BCA68E" stroke-width="2" stroke-linecap="square"></path>
<rect id="Rectangle-1" stroke="#BCA68E" stroke-width="2" fill="#FFFFFF" x="387" y="89" width="88" height="28"></rect>
<text id="func(3)" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="408" y="107">func(3)</tspan>
</text>
<path d="M405.581818,29.3424658 L395.911364,26.4383562 L403.490909,10.2739726 L383.470455,31.0958904 L393.193182,34 L387.286364,49.890411 L405.581818,29.3424658 L405.581818,29.3424658 Z M385.195455,30.6575342 L400.302273,14.9315068 L394.604545,27.0410959 L403.856818,29.7808219 L389.9,45.6164384 L394.447727,33.3972603 L385.195455,30.6575342 L385.195455,30.6575342 Z" id="Shape" stroke="#EE6B47" stroke-width="3" fill="#EE6B47" stroke-linecap="square"></path>
<path d="M386,137.5 L386,67.5" id="Line" stroke="#BCA68E" stroke-width="2" stroke-linecap="square"></path>
<text id="100" font-family="Consolas" font-size="18" font-weight="normal" fill="#8A704D">
<tspan x="93" y="165">100</tspan>
</text>
<text id="200" font-family="Consolas" font-size="18" font-weight="normal" fill="#8A704D">
<tspan x="237" y="165">200</tspan>
</text>
<text id="300" font-family="Consolas" font-size="18" font-weight="normal" fill="#8A704D">
<tspan x="372" y="165">300</tspan>
</text>
<path d="M199.5,104.5 L249.5,104.5" id="Line" stroke="#EE6B47" stroke-width="3" stroke-linecap="square"></path>
<path d="M342.5,104.5 L383.5,104.5" id="Line-2" stroke="#EE6B47" stroke-width="3" stroke-linecap="square"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 4 KiB

BIN
1-js/06-advanced-functions/08-settimeout-setinterval/setinterval-interval@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 19 KiB

BIN
1-js/06-advanced-functions/08-settimeout-setinterval/settimeout-interval.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 7.4 KiB

39
1-js/06-advanced-functions/08-settimeout-setinterval/settimeout-interval.svg Normal file
View file

@ -0,0 +1,39 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="566px" height="183px" viewBox="0 0 566 183" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>settimeout-interval.svg</title>
<desc>Created with sketchtool.</desc>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="settimeout-interval.svg">
<path d="M11.5,102 L561.5,102" id="Line" stroke="#BCA68E" stroke-width="2" stroke-linecap="square"></path>
<rect id="Rectangle-1" stroke="#BCA68E" stroke-width="2" fill="#FFFFFF" x="61" y="87" width="88" height="28"></rect>
<text id="func(1)" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="82" y="105">func(1)</tspan>
</text>
<path d="M79.5818182,27.3424658 L69.9113636,24.4383562 L77.4909091,8.2739726 L57.4704545,29.0958904 L67.1931818,32 L61.2863636,47.890411 L79.5818182,27.3424658 L79.5818182,27.3424658 Z M59.1954545,28.6575342 L74.3022727,12.9315068 L68.6045455,25.0410959 L77.8568182,27.7808219 L63.9,43.6164384 L68.4477273,31.3972603 L59.1954545,28.6575342 L59.1954545,28.6575342 Z" id="Shape" stroke="#EE6B47" stroke-width="3" fill="#EE6B47" stroke-linecap="square"></path>
<path d="M60,135.5 L60,65.5" id="Line" stroke="#BCA68E" stroke-width="2" stroke-linecap="square"></path>
<rect id="Rectangle-1" stroke="#BCA68E" stroke-width="2" fill="#FFFFFF" x="254" y="87" width="88" height="28"></rect>
<text id="func(2)" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="275" y="105">func(2)</tspan>
</text>
<path d="M262.911364,24.4383562 L270.490909,8.2739726 L250.470455,29.0958904 L260.193182,32 L254.286364,47.890411 L272.581818,27.3424658 L262.911364,24.4383562 Z M267.302273,12.9315068 L261.604545,25.0410959 L270.856818,27.7808219 L256.9,43.6164384 L261.447727,31.3972603 L252.195455,28.6575342 L267.302273,12.9315068 Z" id="Shape" stroke="#EE6B47" stroke-width="3" fill="#EE6B47" stroke-linecap="square"></path>
<path d="M253,135.5 L253,65.5" id="Line" stroke="#BCA68E" stroke-width="2" stroke-linecap="square"></path>
<rect id="Rectangle-1" stroke="#BCA68E" stroke-width="2" fill="#FFFFFF" x="447" y="87" width="88" height="28"></rect>
<text id="func(3)" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="468" y="105">func(3)</tspan>
</text>
<path d="M465.581818,27.3424658 L455.911364,24.4383562 L463.490909,8.2739726 L443.470455,29.0958904 L453.193182,32 L447.286364,47.890411 L465.581818,27.3424658 L465.581818,27.3424658 Z M445.195455,28.6575342 L460.302273,12.9315068 L454.604545,25.0410959 L463.856818,27.7808219 L449.9,43.6164384 L454.447727,31.3972603 L445.195455,28.6575342 L445.195455,28.6575342 Z" id="Shape" stroke="#EE6B47" stroke-width="3" fill="#EE6B47" stroke-linecap="square"></path>
<path d="M446,135.5 L446,65.5" id="Line" stroke="#BCA68E" stroke-width="2" stroke-linecap="square"></path>
<path d="M150.5,102.5 L250.5,102.5" id="Line" stroke="#EE6B47" stroke-width="3" stroke-linecap="square"></path>
<path d="M343.5,102.5 L443.5,102.5" id="Line-2" stroke="#EE6B47" stroke-width="3" stroke-linecap="square"></path>
<text id="100" font-family="Consolas" font-size="18" font-weight="normal" fill="#000000">
<tspan x="187" y="177">100</tspan>
</text>
<text id="100" font-family="Consolas" font-size="18" font-weight="normal" fill="#000000">
<tspan x="380" y="177">100</tspan>
</text>
<path id="Line-3" d="M165.5,151.5 L237.5,151.5 L237.5,145.5 L251.5,152.5 L237.5,159.5 L237.5,153.5 L165.5,153.5 L165.5,159.5 L151.5,152.5 L165.5,145.5 L165.5,151.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line-3-Copy" d="M355.5,151.5 L427.5,151.5 L427.5,145.5 L441.5,152.5 L427.5,159.5 L427.5,153.5 L355.5,153.5 L355.5,159.5 L341.5,152.5 L355.5,145.5 L355.5,151.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 4.2 KiB

BIN
1-js/06-advanced-functions/08-settimeout-setinterval/settimeout-interval@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 18 KiB