回调顺序
JavaScript 函数按照它们被调用的顺序执行。而不是以它们被定义的顺序。
js数据顺序问题
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 函数序列</h2>
<p>JavaScript 函数按照它们被调用的顺序执行。</p>
<p id="demo"></p>
<script>
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
function myFirst() {
myDisplayer("Hello");
}
function mySecond() {
myDisplayer("Goodbye");
}
mySecond();
myFirst();
//mySecond();
</script>
</body>
</html>
js 回调数据执行
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 回调</h2>
<p>进行计算，然后显示结果。</p>
<p id="demo"></p>
<script>
//（3）这个方法渲染数据 到页面
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
//（2）两个数据带到这个方法里边
// 然后两个数据进行相加 赋值给了 sum 最后返回
function myCalculator(num1, num2) {
let sum = num1 + num2;
myDisplayer(sum);
}
//（1）我输入了 两个数据
myCalculator(5, 5);
</script>
</body>
</html>
js 异步
等待超时
在使用 JavaScript 函数
setTimeout()时，可以指定超时时执行的回调函数：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 回调</h1>
<p>等待 3 秒（3000 毫秒）让此页面发生变化。</p>
<h1 id="demo"></h1>
<script>
//定时器
setTimeout(myFunction, 3000);
function myFunction() {
document.getElementById("demo").innerHTML = "I love You !!";
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 回调</h1>
<p id="demo"></p>
<script>
//调用方法渲染
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
//方法
function getFile(myCallback) {
let req = new XMLHttpRequest();
req.open('GET', "/demo/js/mycar.html");//请求
req.onload = function() {//判断请求数据的真实性
if (req.status == 200) {
myCallback(this.responseText);
} else {
myCallback("Error: " + req.status);
}
}
req.send();
}
getFile(myDisplayer);
</script>
</body>
</html>
js Promise
定义数据 判断对错
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Promise</h1>
<p id="demo"></p>
<script>
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
//创建promise 方法 定义数据 x = 0
let myPromise = new Promise(function(myResolve, myReject) {
let x = 0;
// 一些代码（请尝试将 x 改为 5）
//判断数据是不是等于 0
//上边定义了 如果不等于 0 就会报错
if (x == 0) {
myResolve("OK");
} else {
myReject("Error");
}
});
//监听数据
myPromise.then(
function(value) {myDisplayer(value);},
function(error) {myDisplayer(error);}
);
</script>
</body>
</html>
promise 倒计时
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Promise</h1>
<p>等待 3 秒（3000 毫秒）让此页面发生变化。</p>
<h1 id="demo"></h1>
<script>
const myPromise = new Promise(function(myResolve, myReject) {
setTimeout(function(){ myResolve("I love You !!"); }, 3000);
});
myPromise.then(function(value) {
document.getElementById("demo").innerHTML = value;
});
</script>
</body>
</html>
js Async
Async 语法
函数前的关键字
async使函数返回 promise：Await 语法
函数前的关键字
await使函数等待 promise：let value = await promise;
await关键字只能在async函数中使用。
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript async / await</h1>
<p>请等待 3 秒（3000 毫秒）让此页面发生变化。</p>
<h1 id="demo"></h1>
<script>
async function myDisplay() {
let myPromise = new Promise(function(myResolve, myReject) {
setTimeout(function() { myResolve("I love You !!"); }, 3000);
});
document.getElementById("demo").innerHTML = await myPromise;
}
myDisplay();
</script>
</body>
</html>
