Lodash工具库Function学习

一、Function

1_.defer(func, [args])

推迟调用func，直到当前堆栈清理完毕。 调用时，任何附加的参数会传给func。

_.defer(function(text) {
    console.log(text);
}, '执行一次');//使里面代码在script标签中第二次循环时再调用
console.log("再执行一次");

2_.delay(func, wait, [args])

延迟 wait 毫秒后调用 func。 调用时，任何附加的参数会传给func。

_.delay(function(text) {
  console.log(text);
}, 1000, '延迟一秒');//与serTimeout相似

3_.flip(func)

创建一个函数，调用func时候接收翻转的参数。

var flipped = _.flip(function() {
  console.log(arguments);
});
flipped('a', 'b', 'c', 'd');

4_.negate(predicate)

创建一个针对断言函数 func 结果取反的函数。 func 断言函数被调用的时候，this 绑定到创建的函数，并传入对应参数。

function isEven(n) {
    return n % 2 == 0;
}
_.filter([1, 2, 3, 4, 5, 6], _.negate(isEven));
//过滤掉能被2整除的

5_.once(func)

创建一个只能调用 func 一次的函数。 重复调用返回第一次调用的结果。 func 调用时， this 绑定到创建的函数，并传入对应参数。

function test(){
    console.log(123);
}
var onece = _.once(test);
onece();
onece();//只执行一次，第二次调用无效

6_.bind(func, thisArg, [partials])

创建一个调用func的函数，thisArg绑定func函数中的 this (注：this的上下文为thisArg) ，并且func函数会接收partials附加参数。
原生js的bind

function f(y,z){
    return this.x+y+z;
}
var m = f.bind({x:1},2);
console.log(m(3));//1+2+3=6
//这里的bind方法会把它的第一个实参绑定给f函数体内的this，所以这里的this即指向{x:1}对象；
//从第二个参数起，会依次传递给原始函数，这里的第二个参数2即是f函数的y参数；
// 最后调用m(3)的时候，这里的3便是最后一个参数z了，所以执行结果为1+2+3=6

实现原生js的bind方法

Function.prototype.newBind = function (target){
    var self = this;//保存调用者this
    var args = [].slice.call(arguments,1);//0:targetj
    var temp = function (){};
    var f = function (){
    	var _arg = [].slice.call(arguments,0);//截取新函数的实参
    	return self.apply(this instanceof temp ? this : (target || window),args.concat(_arg));
    }
    temp.prororype = self.prototype;
    f.prototype = new temp();
    return f;
};

Loadash的bind

var greet = function(greeting, punctuation) {
  return greeting + ' ' + this.user + punctuation;
};
var obj = { 'user': 'fred' };
var bound = _.bind(greet, obj, 'hi');//obj绑定给了greet的this
console.log(bound('!'));//hi fred!

7_.curry(func, [arity=func.length])

创建一个函数，该函数接收 func 的参数，要么调用func返回的结果，如果 func 所需参数已经提供，则直接返回 func 所执行的结果。或返回一个函数，接受余下的func 参数的函数，可以使用 func.length 强制需要累积的参数个数。(函数式编程柯里化)
原生js的curry

function add(a,b,c,d){
    return a + b + c + d;
};
function Curry(fn,length){
    var length = length || fn.length;//fn.lenght为形参长度
    return function(){
        if(arguments.length < length){
            //[fn,a,..]
            var conbined = [fn].concat([].slice.call(arguments,0));//依次拼接参数
            return Curry(FixedParmasCurry.apply(this,conbined),length - arguments.length);
        }else{
            return fn.apply(this,arguments);
        }
    }
};
var newadd = Curry(add);
console.log(newadd(3)(4)(5)(6));//18

Loadash的curry

var abc = function(a, b, c) {
  return a+b+c;
};
var curried = _.curry(abc);
curried(1)(2)(3);//6

8_.throttle(func, [wait=0], [options={}])

创建一个节流函数，在 wait 秒内最多执行 func 一次的函数。 该函数提供一个 cancel 方法取消延迟的函数调用以及 flush 方法立即调用。 可以提供一个 options 对象决定如何调用 func 方法， options.leading 与|或 options.trailing 决定 wait 前后如何触发。 func 会传入最后一次传入的参数给这个函数。 随后调用的函数返回是最后一次 func 调用的结果。
原生js的节流

var a = 0;
$('body').on('click',add);
function add(){
    a+=1;
    $('body').html(a);
};//dom操作不做限制，资源加载等耗费性能，会导致界面卡顿
function throttle(handle,wait){//节流函数
    var lastTime = 0;
    return function (e){
        var nowTime = new Date().getTime();//获取当前时间
        if(nowTime - lastTime > wait){//设置某个函数触发时间间隔
            handle.apply(this,arguments);//return后调用者指向btn，arguments为事件对象
            lastTime = nowTime;
        }
    }
};
$('body').on('click',throttle(addTo,1000));

Loadash的节流

var throttled = _.throttle(addTo, 1000, { 'trailing': false });
$('body').on('click',throttled);

9_.debounce(func, [wait=0], [options={}])

创建一个 debounced（防抖动）函数，该函数会从上一次被调用后，延迟 wait 毫秒后调用 func 方法。 debounced（防抖动）函数提供一个 cancel 方法取消延迟的函数调用以及 flush 方法立即调用。 可以提供一个 options（选项） 对象决定如何调用 func 方法，options.leading 与|或 options.trailing 决定延迟前后如何触发（注：是 先调用后等待 还是 先等待后调用）。 func 调用时会传入最后一次提供给 debounced（防抖动）函数 的参数。 后续调用的 debounced（防抖动）函数返回是最后一次 func 调用的结果。
原生js的防抖

//函数防抖就是在函数需要频繁触发情况时，只有足够空闲的时间，才执行一次
//下面模仿百度搜索栏，输入关键字后间隔一定时间再给出检索出的标题
var int = document.getElementsByClassName('intp')[0];
function debounce(handle,delay){
    var timer = null;
    return function(){
        var _self = this,
        _arg = arguments;
        clearTimeout(timer);
        timer = setTimeout(function(){
            handle.apply(_self,_arg);
        },delay)
    }
}
function ajax(e){
    console.log(e,this.value);
};
int.oninput = debounce(ajax,1500);

Loadash的防抖

var debounced = _.debounce(addTo, 1000);
$('html').on('click',debounced);
// 取消防抖动调用
$('html').on('click', debounced.cancel);