Lodash Function函数方法
_.now()
获取当前的时间点(毫秒数)
console.log(_.now()); // 1651751621647
记录延迟函数调用的毫秒数
_.defer(function(stamp) { // 当前毫秒 减去 实参传进来的时间戳 console.log(_.now() - stamp) }, _.now());
下面是Function扩展的一些方法
一、绑定函数
_.bind()
看一下原生的bind方法就可以了
var greet = function(greeting, punctuation) { return greeting + ' ' + this.user + punctuation; }; var object = { 'user': '远远的地方' }; var bound = _.bind(greet, object, 'holle'); console.log( bound('!') ); // holle 远远的地方!
二、科里化
_.curry()
var abc = function(a, b, c) { return [a, b, c]; }; var curried = _.curry(abc); console.log( curried(1)(2)(3) ); // [1, 2, 3] console.log( curried(1, 2)(3) ); // [1, 2, 3] console.log( curried(1, 2, 3) ); // [1, 2, 3] console.log( curried(1)(_, 3)(2) ); // [1, 2, 3]
三、性能优化
1、防抖函数
_.debounce()
<button>发送</button> <script> function sendMail(text){ console.log(text); } var btn = document.getElementsByTagName('button')[0]; var sendFun = _.debounce(sendMail, 300); btn.onclick = function(){ sendFun('发送了'); }; </script>
2、节流函数
_.throttle()
<button>发送</button> <script> function sendMail(text){ console.log(text); } var btn = document.getElementsByTagName('button')[0]; var sendFun = _.throttle(sendMail, 3000); btn.onclick = function(){ console.log('没有节流~~~'); sendFun('节流了'); } </script>
四、推迟
_.defer()
推迟调用函数,在第二次事件循环的时候调用
_.defer(function(text) { console.log(text); }, '第二次事件循环(这是实参)'); console.log('第一次事件循环');
defer里面的function要等整script标签里所有的代码都走完后才执行
比如在CSS3中通过transition动态的让某些属性过渡,假设添加过渡的transtiton以及过渡的css属性都要通过js完成
1). 方法里填transition,方法下面直接设置left = 20的值。这个时候是没有过渡效果的的,因为都是同时发生的
2). 要先填上transition,然后再让属性left = 20动,有一个先后的顺序
3). 这种情况可以通过defer解决问题
PS: deferred是推迟的意思
五、延迟
_.delay()
函数延迟执行,这个方法就是一个延迟执行的定时器
_.delay(function(now) { console.log(now - _.now()); // 输出3005(数字不是特别精准) }, 3000, _.now()); // 延迟3秒,最后一个参数是实参
PS: later是后来的意思
六、翻转参数
_.flip()
调用函数时翻转参数
function fn(){ return arguments; } var fn= _.flip(fn); // 把函数fn改造一下在丢给fn console.log(fn(1,2,3,4)); // [4, 3, 2, 1]
七、取反
_.negate()
结果取反函数
function fn(n) { return n % 2 == 0; } // 按照fn函数的原规则过滤偶数出来 console.log(_.filter([1, 2, 3, 4, 5, 6], fn)); // [2, 4, 6] // _.negate(fn))规则取反,过滤出奇数 console.log(_.filter([1, 2, 3, 4, 5, 6], _.negate(fn))); // [1, 3, 5]
按照negate方法过滤,过滤的形式是"_.negate(fn)"取反,结果是偶数取反后是奇数
八、函数只能被调用一次
_.once()
函数只能调用一次
function fn(){ console.log('bababa...'); } var initialize = _.once(fn); // 把fn函数改造了,改成生命只有一次 initialize(); // bababa... initialize(); initialize();
保证函数只能被调用一次,跟jQuery里的once方法是一样的
九、实参占位符
_partial()
函数参数占位符
var greet = function(greeting, name){ return greeting + ' ' + name; } var sayHelloTo = _.partial(greet, 'hello'); console.log(sayHelloTo('fred')); // 'hello fred' var greetFred = _.partial(greet, _, 'fred'); // 使用了占位符。 console.log(greetFred('hi')); // 'hi fred'
Leave a comment
0 Comments.