柯里化

• 柯里化函数:
  • 一个函数接收多个参数能够完成功能,柯里化函数就是将这一个函数拆分为两个函数
  • 每个函数都只能接收一个参数,然后完成的功能相同

function fn(fnReg) { // 外层函数,负责接收正则
    return function (fnStr) { // 内层函数,负责接收字符串,并完成正则校验
        console.log(fnReg.test(fnStr)) 
    }
}
const testNum = fn(/^\d{5,8}$/)
testNum('1234')

函数的柯里化封装

• 函数柯里化内
  • 外层函数:收集参数
  • 内层函数:负责处理功能
• 功能:拼接地址栏字符串

function fn(a,b,c,d){
    return a + '://' + b + ':' + c + d
}
function curry(callback,...arg){ // 外层函数,负责接收参数
    return function (..._arg){
        _arg = [...arg,..._arg]//把所有参数放在一个数组中,方便统一管理与维护
        if(_arg.length === callback.length){
            return callback(..._arg)
        }else {
            return curry(callback,..._arg)
        }
    }
}
let newFn = curry(fn,'http')
const newFn2 = newFn('127.0.0.1', '8080')
const newFn3 = newFn2('/index.html')
console.log(newFn3)

节流

• 事件在执行时,第一次开始执行时,在结束之前或者在指定时间之前,无法触发下一次
• 除非等到第一次执行结束或者在指定时间到达后,才可以进行下一次

<input type="text" class="inp">
const inp = document.querySelector('.inp')
//节流
let flag = true
inp.oninput = function () {
    if(flag === false)return
    flag = false
    setTimeout(() => {
        flag = true
        console.log(this.value)
    },300)
}
//自执行函数
/**
     * 自执行函数需要在代码最前面给添加一个 分号,用于和上一行代码起到一个分隔作用
     * 
     *    自执行函数如果需要传参,将参数书写在 第二个小括号内即可
*/
;(function fn (num){
    console.log('我是一个普通的函数 fn', num)
})(99)
//节流的优化
inp.onclick = (function (flag){//当前这个函数会立即执行,然后返回一个函数给到 inp.oninput
    return function fn (){
        if(flag === false) return // 使用 flag 的时候会先在当前作用域找,没找到,然后去上层作用域(自执行函数内)找,在这里找到了形参 flag,初始值为 true
        flag = false
        setTimeout (() => {
            flag = true
            console.log(this.value)
        },300)
    }
})(true)

防抖

• 事件在开始执行时,如果快速触发了第二次,那么第二次会取代第一次,只会执行最后一次

<input type="text" class="inp">
const inp = document.querySelector('.inp')
//防抖
let timer = 0
inp.oninput = function(){
    clearTimeout(timer)
    timer = setTimeout(() => {
        console.log(this.value)
    },300)
}

//自执行函数
inp.oninput = (function (timer) {
    return function () {
        clearTimeout(timer)
        timer = setTimeout(() => {
            console.log(this.value)
        },300)
    }
})(0)