Chapter4-HTML中的同步和异步
在HTML中，同步和异步通常是通过JavaScript中的异步编程模式来实现的。同步代码会按照编写顺序顺序执行，而异步代码可以在等待某个操作完成的同时继续执行其他代码，不会阻塞程序的执行。
以下是一个简单的例子，演示了如何在HTML页面中使用JavaScript执行同步和异步操作：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>同步和异步示例</title>
<script>
// 同步函数
function syncFunction() {
console.log('开始执行同步任务...');
// 模拟一些计算或者其他任务
for (let i = 0; i < 1000000; i++) {
// 这里做一些计算
}
console.log('同步任务执行完成。');
}
// 异步函数
function asyncFunction() {
console.log('开始执行异步任务...');
// 使用setTimeout模拟异步操作
setTimeout(function() {
console.log('异步任务执行完成。');
}, 1000); // 延迟1000毫秒执行
console.log('异步函数已经调度，可以继续执行其他任务。');
}
</script>
</head>
<body>
<button onclick="syncFunction()">同步操作</button>
<button onclick="asyncFunction()">异步操作</button>
<p>点击上方按钮，观察控制台输出的顺序。</p>
</body>
</html>在这个例子中，当用户点击“同步操作”按钮时，会立即执行syncFunction中的计算任务。当用户点击“异步操作”按钮时，会立即执行asyncFunction，并通过setTimeout进行延时。setTimeout是浏览器提供的一个异步API，它将在指定的延时之后执行给定的函数。在执行asyncFunction期间，即使设置了延时，浏览器也可以继续执行其他任务，例如处理用户界面的更新或响应其他用户输入。
评论已关闭