Skip to content

Instantly share code, notes, and snippets.

@subzey

subzey/index.html

Created August 24, 2022 18:58
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save subzey/ec33482e6b75009dc7574a1e747d142d to your computer and use it in GitHub Desktop.
Save subzey/ec33482e6b75009dc7574a1e747d142d to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!doctype html>
<style>
.animated {
animation: rotate 1s linear infinite;
}
@keyframes rotate {
from { transform: rotate(0turn) }
to { transform: rotate(1turn) }
}
</style>
<img src="data:image/svg+xml,
<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='-10 -10 20 20'><path d='m0-9a9 9 0 0 1 9 9' stroke='black' fill='none'><animateTransform attributeName='transform' begin='0s' dur='1s' type='rotate' from='0' to='360' repeatCount='indefinite'
/></path></svg>">
<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='-10 -10 20 20' class="animated"><path d='m0-9a9 9 0 0 1 9 9' stroke='black' fill='none'/></svg>
<fieldset>
<legend>Пульт управления тормозами</legend>
<button id="issue-slow-task-1" type="button">Слегка</button>
<button id="issue-slow-task-2" type="button">Немного</button>
<button id="issue-slow-task-3" type="button">Значительно</button>
<button id="issue-slow-task-4" type="button">Сильно</button>
<button id="issue-slow-task-5" type="button">Гори всё огнём</button>
</fieldset>
<script>
function slowSyncMacroTask(howLong) {
console.log('Начинаем тормозить...');
for (
const now = performance.now();
performance.now() - now < howLong;
);
console.log('Закончили тормозить.');
}
document.querySelector('#issue-slow-task-1').addEventListener('click', (e) => slowSyncMacroTask(50));
document.querySelector('#issue-slow-task-2').addEventListener('click', (e) => slowSyncMacroTask(100));
document.querySelector('#issue-slow-task-3').addEventListener('click', (e) => slowSyncMacroTask(200));
document.querySelector('#issue-slow-task-4').addEventListener('click', (e) => slowSyncMacroTask(400));
document.querySelector('#issue-slow-task-5').addEventListener('click', (e) => slowSyncMacroTask(800));
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment