前端手写函数汇总

一、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(()