一、js篇
1、防抖函数
防抖:指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间
function debounce(fn,t){
let timer=0
// 返回一个匿名函数,为了能够一直调用
return function(){
// 如果已经存在setTimeout定时器先删除,再添加新定时器
if(timer) clearTimeout(timer)
timer=setTimeout(function(){
fn()
},t)
}
}
2、节流函数
节流:连续触发事件但是在 n 秒中只执行一次函数
function throttle(fn,t){
let timer
return function(){
// 和防抖区别在于清空定时器放在setTimeout里面
if(!timer){
timer=setTimeout(function(){
fn()
// 不能用clearTimeout,因为在定时器运行中情况定时器是不合理的
timer=null
},t)
}
}
}
3、call函数
4、apply函数
5、bind函数
6、Promise
Promise的自定义封装和一些API的封装
// 我自己的Promise构造函数
// 这里的executor是接住了一个匿名函数,所以可以加括号传参调用
function Promise(executor) {
// 添加属性
this.promiseState = 'pending'
this.promiseResult = null
// 声明属性
this.callbacks = []
// 保存实例对象this的值,因为resolve调用是直接 resolve('OK')这样调用,所以他的this是指向window的
const self = this
// resolve函数
function resolve(data) {
// 判断状态,保证状态只被修改一次
if (self.promiseState !== 'pending') return
// 1、改变状态(promiseState)
self.promiseState = 'fulfilled'//resolved
// 2、设置对象结果值(promiseResult)
self.promiseResult = data
// 调用成功的回调函数
// 当我的函数是异步时,也就是executor中有个定时器,就会在定时器结束后才会改变状态
// 就会导致不会触发then,因为then中是有状态===fulfilled或rejected才会调用我传入的匿名函数
// 所以加上pending状态的判断,当我状态没改变就运行到then时(有个定时器),
// 用一个对象保存下两个匿名函数,当定时器时间结束,执行executor时
// 就会调用对应的resolve或reject,就会调用到这里
// 从而去调用then中的匿名函数,实现状态改变之后再回调
setTimeout(()