函数柯里化

• 将一个 接受 多个参数的函数, 更改成每次只传递一个参数的函数
• 利用了函数的闭包 延长了 外部函数的使用时间

 //普通函数想要执行 和 
   function fun(c, d){
        return c+ d
     }
     let ser =  fun( 2,3)
     console.log(ser)

// 使用闭包
   function fn (a){
            return function(b){
              return a+b
            }
        }
         const str = fn(2)  //str 当前时一个函数 且固定了第一个参数 的值
         let sum = str(2)  // 我们只要改变第二个参数上做出操作 即可 
         console.log(sum)

//正则在这一块 尤为突出

     function fn(reg){
        return function(str){
         return reg.test(str)
        }
       }
       const ser = fn(/^\d{4,8}$/)
       let marry = ser('123345')
       console.log(marry) //true

封装函数柯里化

• 封装柯里化
• 外层函数负责收集参数
• 内层函数负责 在 参数收集完毕的时候 执行功能
• www.baidu.com:8080/index.html
• www.baidu.com:8080/a.html
• 协议: https http
• 域名: www.baidu.com www.taobao.com 127.0.0.1
• 端口号: 0~65535 80 443 7777
• 地址: index.html a.html /a/b/c.html

       //  https://www.baidu.com:8080/index.html
        //  https://www.baidu.com:8080/a.html

        function fun (a, b, c, d){
          return a + '//' + b + ':' + c + d
        }
    //    let str =  fun('http', 'www.baidu.com', '08', '/index.html')
    //    console.log(str)
       //封装函数柯里化
      
        function fn(origin, ...arr){
            // console.log(origin.length)
            console.log(...arr)
            return function(...Arr){
             Arr = [...arr ,...Arr ]
             console.log(Arr)
             if(Arr.length === origin.length){
                return Arr
                console.log(Arr)
             }else{
                return fn(origin, ...Arr)
                // console.log(fn(origin, ...Arr))
             }
            }
            
        }
        const ser = fn(fun,'http') //fun ==> 相当于 上面的功能函数  origin
        // console.log(ser)
        const ser1 = ser('www.baidu.com', '08' )
        // console.log(ser1)
        const ser2 = ser1('/index.html')
        // console.log(ser2)
 

防抖与节流

防抖:

• 在一定时间内, 快速触发同一事件 每次重新触发, 都顶掉前一次事件, 以 后一次事件为主

普通函数 执行 防抖

      //  <input class="inp" type="text"> thml 结构
       const inp = document.querySelector('.inp ') 
     let timer = 0
         inp.addEventListener('input', function(e){
              clearTimeout(timer)
               
               timer = setTimeout(function(){
                console.log(`搜索了${e.target.value}`)  
              },300)
         })

自执行函数执行 防抖

    //  <input class="inp" type="text"> thml 结构
    
        const inp = document.querySelector('.inp ')

     inp.oninput =(function(timer){
            return function(e){
                clearTimeout(timer)
              timer =  setTimeout(function(){
                    console.log(`搜索了${e.target.value}`) 
                },300)
             }
        })(0)

节流:

• 在一定时间内, 快速触发同一事件 在规定时间内, 只能触发一次, 下一次必须等到 规定时间结束以后才能执行

普通函数 执行 节流

     //  <input class="inp" type="text"> thml 结构
    
        const inp = document.querySelector('.inp ')
        准备变量 
        let flag = true
        //添加 表单事件
        inp.oninput = function(e){
            if(flag === false)return
            flag = false
          console.log(`搜索了${e.target.value}`)
         
         setTimeout(()=>{
           flag = true
          },300)
        }

自执行函数执行 节流

        //  <input class="inp" type="text"> thml 结构

      const inp = document.querySelector('.inp ')
      inp.oninput = (function(flag){
            return function(e){

                if(flag === false)return

                flag = false
           console.log(`搜索了${e.target.value}`)
           setTimeout(function(){
               flag = true
           },300)
            }
        })(true)