网站制作公司杭州,网站怎样添加友情链接,四平网站优化,wordpress知识付费主题零.前言
JavaScript(一)---【js的两种导入方式、全局作用域、函数作用域、块作用域】-CSDN博客
JavaScript(二)---【js数组、js对象、this指针】-CSDN博客
JavaScript(三)---【this指针#xff0c;函数定义、Call、Apply、函数绑定、闭包】-CSDN博客
JavaScript(四)---【执…零.前言
JavaScript(一)---【js的两种导入方式、全局作用域、函数作用域、块作用域】-CSDN博客
JavaScript(二)---【js数组、js对象、this指针】-CSDN博客
JavaScript(三)---【this指针函数定义、Call、Apply、函数绑定、闭包】-CSDN博客
JavaScript(四)---【执行上下文、hoisting(提升)、严格模式、事件】-CSDN博客
JavaScript(五)---【DOM】-CSDN博客
一.回调
1.1简介
“回调”是作为参数传递给另一个函数的函数
这种技术允许函数调用另一个函数回调函数可以在另一个函数完成后运行
1.2什么时候使用回调函数
现在假设有一个业务需求”先计算两个数的和再将和输出并且我们可以随时终止输出和“
或许有的读者会很轻松的写出如下代码 scriptfunction printData(result){console.log(result);}function calculator(x,y){let sum x y;return sum;}let result calculator(5,5);printData(result);/script
我们将计算和输出分别用两个函数来完成但是这样会有一个问题那就是每次我们都需要使用两个函数比较麻烦。
此时可能有读者又会写出另一种风格的代码 scriptfunction printData(result){console.log(result);}function calculator(x,y){let sum x y;printData(sum);}calculator(5,5);/script
在“calculator函数中调用printData函数”这样每次只需要调用一次“calculator”函数就可以了但是这样仍然有一个问题那就是“无法随时禁止打印的过程”
那么此时就用到我们的回调函数了将printData函数作为参数传给calculator函数即可。
但在使用前我们还是有必要先说明一下怎么使用回调函数。
1.3回调函数的使用
回调函数的使用非常简单将需要在A函数调用的B函数作为参数传递给A函数即可。
此时B函数就成为A函数的一个形参而在A函数中就可以利用形参来代指B函数。
例如 scriptfunction B(){console.log(我是B函数);}function A(myB){console.log(我是A函数);myB();}A(B);/script
效果 注意
在将B函数作为参数传递给A函数时实参不能带有括号只需要写“函数名”即可
而在A函数中使用形参“myB”代指B函数时则需要加上“括号”
1.4问题的解决
那么搞明白回调函数的使用之后我们来是用回调函数解决这个问题。
业务需求“先计算两数之和再输出两数之和并且可以随时终止输出的过程”
解决思路“我们将printData函数作为参数传递给calculator函数在calculator函数中调用printData函数用来完成计算并输出的功能此时如果需要终止输出的过程那么可以给calculator的形参传递一个空值用来表示此时不需要输出” scriptfunction printData(result){console.log(result);}function calculator(x,y,myData){let sum x y;if (myData)myData(sum);}calculator(5,5,printData); //此时需要输出calculator(10,10,undefined) //此时不需要输出/script
效果 二.异步
2.1简介
如果大家接触过“多线程”的概念那么“异步”应该是非常好理解的。
一个相对好理解的说法就是“异步就是在同一时间运行多个代码段(函数、代码块等)”
而官方的说法“与其它函数并行运行的函数称为异步”
给大家举一个例子“在某一时刻我们需要同时获得ab和a*b的值该怎么办如果顺序执行ab和a*b终究会有时间差并不是同时获得。那么此时就用到了异步了将ab和a*b两个运算过程同时进行”
2.2常见的异步函数
在js中内置了多个异步函数便于我们调用如果需要使用更多的异步函数需要用到js库等
下面作者将论述几个常见的异步函数
2.3等待超时函数
等待超时函数“setTimeout()”可以指定超过指定时间后自动执行某个函数
使用方法
setTimeout(执行函数名,超时时间(ms))
ps使用setTimeout会返回一个超时函数变量(该变量存储了超时函数id)
结束方法
使用“clearTimeout(超时函数变量)”来强制结束
注意强制结束应该在超时函数执行前使用否则无效
例如 scriptfunction myFunction(){console.log(我被调用了);}setTimeout(myFunction,3000)/script
以上这个函数将会在“3秒后自动被调用”
可以发现setTimeout的参数是一个函数也就是说setTimeout是一个“回调函数”
2.4等待间隔函数
等待间隔函数“setInterval()”可以指定每隔指定时间执行一次函数直到程序被关闭或者人为结束
(ps:该函数用的特别多)
使用方法
setInterval(函数名,指定时间(ms))
ps使用setInterval函数会返回一个异步函数变量(这个变量存储该异步函数的id)
人为结束“setInterval”函数的方法“使用clearIntervar(异步函数变量)”来强制结束“setInterval” scriptfunction interVal(){console.log(我是等待间隔函数,我被调用了.);}function stopInterVal(){clearInterval(time);}var time setInterval(interVal,1000);/script
以上是一个简单的开启关闭示例
三.promise
3.1简介
promise是一个js对象它链接“生成代码”和“消费代码”
“生成代码”(Producing code)指需要一些时间的代码“消费代码”(Consuming code)指必须等待结果的代码
3.2使用方式 let myPromise new Promise(function(myResolve, myReject) {
// Producing Code可能需要一些时间myResolve(); // 成功时myReject(); // 出错时
});// Consuming Code 必须等待一个兑现的承诺
myPromise.then(function(value) { /* 成功时的代码 */ },function(error) { /* 出错时的代码 */ }
); 注意
当“执行代码”也就是“消费代码”获得结果时它必须调用两个回调函数之一“myResolve、myReject”
而在“消费代码”中“function(value)代表myResolve、function(error)代表myReject”
例如
function myDisplayer(some) {document.getElementById(demo).innerHTML some;
}let myPromise new Promise(function(myResolve, myReject) {let x 0;// 生成代码这可能需要一些时间if (x 0) {myResolve(OK);} else {myReject(Error);}
});myPromise.then(function(value) {myDisplayer(value);},function(error) {myDisplayer(error);}
);
四.Async和Await
4.1简介
使用async关键字可以使我们更方便的使用promise函数而不是创建一个promise对象。
通过在函数前面加入关键字“async”可以使函数返回“promise”
使用“await”关键字可以使函数等待“promise”
4.2使用方法
例如
async function myFunction() {return Hello;
}
//等同于
async function myFunction() {return Promise.resolve(Hello);
}
而使用“async”和“await”可以使我们更方便的完成promise的操作而promise操作的实质就是更安全的进行“异步操作”因为promise可以进行失败逻辑判断处理
再例如
!DOCTYPE html
html
bodyh1JavaScript async / await/h1p请等待 3 秒3000 毫秒让此页面发生变化。/ph1 iddemo/h1script
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上面这个代码就是更安全的“异步操作”
