一、Async await(等待异步)
- Async去声明函数，返回一个promise对象，await在声明的函数里面使用
function fn_1() {
return 'fn_1'
}
function fn_2() {
return new Promise((reslove) => {
setTimeout(() => {//因为定时器是异步的
num = 10
return reslove('fn_2')
}, 2000)
})
}
function fn_3() {
console.log(num);
return 'fn_3'
}
// async必须声明的是一个function，await必须在声明的函数内部使用。
async function fn() {
console.log(fn_1());
console.log(await fn_2());//等到定时器完成后 执行
console.log(fn_3());
}
fn()
二、函数的防抖
- 作用：防止短时间内高频繁调用同一接口的方法。
- 防抖：设置延时器,短时间高频率触发,只有最后一次触发成功
var timer = null
document.getElementById('btn').onclick = function () {
clearTimeout(timer)
timer = setTimeout(() => {
console.log(1);
}, 1000)
}
三、函数的节流
- 作用：防止短时间内高频繁调用同一接口的方法。
- 节流：设置状态锁，短时间内高频率触发，只有第一次成功
var key = false
document.getElementById('btn').onclick = function () {
if (!key) {
key = true
setTimeout(() => {
console.log(1);
key = false
}, 2000)
}
}
四、模块化
1、vscode 安装 live sever
2、导出 export
- 导出
//函数前面加export
export function getUserInfo() {
console.log('登录了')
}
- 批量导出 {}
export {getUserInfo,num,login}
- 默认导出 只能用一次
export default {
num:10,
say() {
console.log("say")
}
}
3、导入 import
- 导入 import { } form "./login.js "
import {getUserInfo,num as myNum,login} from './login.js'
-
重命名导入 as
-
整体导入 *as 变量名
import * as obj from './login.js'
- 默认导入
import a from './login.js'
console.log(a);
