JavaScriptDemo——Day 26（函数编程思想浅层）

一时失言乱红尘 2023-07-23 03:56 4阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTE3NDIwOA_size_16_color_FFFFFF_t_70]

## 优化网络性能之节流与防抖 ##

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>节流和防抖</title>
    </head>
    
    <body>
        <div id="show">
            0
        </div>
        <button class="btn">抢东西</button>
        <input type="text" id="inp">
        <script>
            var oDiv = document.getElementById('show');
            var oButton = document.getElementsByClassName('btn')[0];
            // 节流 1 1000 2 1000 3
            function throttle(handler, wait) {
         
                var lastTime = 0;
    
                return function(e){
         
                    var nowTime = new Date().getTime();
                    if(nowTime - lastTime > wait){
         
                        // this oBtn
                        // event
                        handler.apply(this,arguments);
                        lastTime = nowTime;
                    }
                }
            }
    
            function buy(e) {
         
                console.log(this,e);
                oDiv.innerText = parseInt(oDiv.innerText) + 1;
            }
    
            oButton.onclick = throttle(buy,1000);
    
    
    
    
            // 实时搜索
            var oInp = document.getElementById('inp');
            var timer = null;
            function debonunce(handler , delay){
         
                
                var timer = null;
                return function(e){
              
                    var self = this; 
                    var arg = arguments;
                    clearTimeout(timer);
                    timer = setTimeout(function(){
         
                        handler.apply(self,arg);
                    },delay)
                }
            }
            function ajax(e){
         
                
                console.log(e,this.value);
            }
            oInp.oninput = debonunce(ajax , 1000);
            // oInp.oninput = function(e){
         
            //     var _self = this;
            //     var _arg = arguments;
            //     clearInterval(timer);
            //     timer = setTimeout(function(){
         
            //         ajax.apply(_self,_arg);
            //     },1000)
            // }
    
        </script>
    </body>
    
    </html>

## 柯里化函数 类似于ajax链式调用 ##

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport">
        <title>柯里化</title>
    </head>
    
    <body>
        <script>
            // fixed parmas4
            function add(a, b, c, d) {
         
                // add.length == 4 true
                // console.log(add.length); 4
                return a + b + c + d;
            }
            // curry 柯里化
            function FixedParmasCurry(fn) {
         
                // [add,1,2]
                var _arg = [].slice.call(arguments, 1);
                return function () {
         
                    // arguments [2,3]
                    // [1,2,2,3]
                    var arg = _arg.concat([].slice.call(arguments, 0));
                    return fn.apply(this, arg);
                }
            }
            // var newAdd = FixedParmasCurry(add, 1, 2);
            // console.log(newAdd(2, 3));// 8 
    
    
    
    
            // look forward to Parms 凑齐参数
            function Curry(fn, length){
         
                // length 4
                var length = length || fn.length;
                return function (){
         
                    if(arguments.length < length){
         
                        // [fn].concat([1]) [fn,1];
                        var combined = [fn].concat([].slice.call(arguments,0));
                        return Curry(FixedParmasCurry.apply(this,combined),length - arguments.length);
                        //  必须固定参数
                    }else{
         
                        return fn.apply(this,arguments);
                    }
                }
            }
            var newAdd = Curry(add);
            console.log(newAdd(1)(2)(3)(4)) // 10
    
            // 应用柯里化 实现了函数的累积极大消除了函数调用的重复 例如
    
            // var nA1 = newAdd(1); // 返回函数已经累加一次（1）
            // var nA11 = nA1(2);  // 返回函数已经累加2次 （1,2）
            // var nA22 = nA11(2); // 返回函数为（1,2,2）还需要再传一个
            // var result = nA22(4); // 返回数值（1,2,2,4）
            // console.log(result); // 9 
            // console.log(nA11(3,4)); // 10
            // newAdd(1, 2, 3, 4);
            // newAdd(1)(2, 3)(4);
            // newAdd(1, 2)(3, 4);
            // newAdd(1)(2)(3)(4);
    
            // 第二个例子ajax
            // POST www.test1.com 'name=cst&code = 111';
            // POST www.test1.com 'key = 22;
            // POST www.test2.com 'name=cst&code = 111';
            // POST www.test2.com 'key = 11';
    
            function ajax (method,url,data){
         
                console.log(method,url,data);
            }
            // ajax('POST', 'www.test1.com', 'name=cst&code = 111')
            // ajax('POST', 'www.test1.com', 'key = 11')
            // ajax('POST', 'www.test2.com', 'name=cst&code = 111')
            // ajax('POST', 'www.test2.com', 'key = 22')
            var ajaxCurry = Curry(ajax);
            var PostAjax = ajaxCurry('POST');
            var Test1Ajax = ajaxCurry('POST')('www.test1.com')
            Test1Ajax('name=cst&code = 111'); 
            Test1Ajax('key = 11');// ajax('POST', 'www.test1.com', 'name=cst&code = 111')
            var Test2Ajax = PostAjax('www.test2.com'); // ajax('POST', 'www.test2.com', 'name=cst&code = 111')
            Test2Ajax('name = cst&code = 111');// ajax('POST', 'www.test2.com', 'name=cst&code = 111')
            Test2Ajax('key = 22')// ajax('POST', 'www.test2.com', 'key = 22')
        </script>
    </body>
    
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTE3NDIwOA_size_16_color_FFFFFF_t_70]: /images/20230528/f268c809412f4283a28d8c02b9fc7012.png