javascript之函数节流

摘要:
函数封装:1 Function throttle{2clearTimeout;3 method.tId=setTimeout;6}调用:1window Onresize=Function(){2rottle;3}另一种封装方法:1varthrottle=Function{2vartimer=null;3returnfunction(){4varcontext=this,args=args;5clearTimeout;6timer=setTimeout;9};10}; 调用:1window onresize=throttle;第一种方法是将上下文变量作为函数参数,直接定制执行函数的this变量;后一个函数的优点是它将延迟时间视为一个变量。

函数节流原理:

  设置一个定时器setTimeout,让执行的函数延缓一段时间之后再去执行,如果在这段时间内,该函数又触发了,那就清除原来的setTimeout,创建一个新的setTimeout,依此类推下去,就执行了函数节流。

函数封装:

1 function throttle(method, context) {
2     clearTimeout(method.tId);
3     method.tId = setTimeout(function(){
4         method.call(context);
5     }, 100);
6 }

调用:

1 window.onresize = function(){
2     throttle(myFunc);
3 }

另一种封装方法:

 1 var throttle = function(fn, delay){
 2     var timer = null;
 3     return function(){
 4         var context = this, args = arguments;
 5         clearTimeout(timer);
 6         timer = setTimeout(function(){
 7             fn.apply(context, args);
 8         }, delay);
 9     };
10  };

调用:

1 window.onresize = throttle(myFunc, 100);

  第一种方法,把上下文变量当做函数参数,直接可以定制执行函数的this变量;后一个函数优势在于把延迟时间当做变量。

免责声明:文章转载自《javascript之函数节流》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇数据库表数据如何去重Oracle中rownum的基本用法下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

ES6规范

一、简介 js由三部分组成:ES+DOM(文档对象模型)+ BOM(浏览器对象模型) ES作为核心,是一套标准,规范了语言的组成部分:语法、类型、语句、关键字、保留字。定义了数据结构和语法,定义了函数和对象的实现,包括原型链和作用域链的机制和实现。 JavaScript 的核心 ECMAScript 描述了该语言的语法和基本对象; DOM 描述了处理网页内...

jQuery 的 ready 函数是如何工作的?(源码分析)

如果你使用过 jQuery , 就必然使用过 ready 函数,它用来注册当页面准备好之后可以执行的函数。 问题来啦,我们的页面什么时候准备好了呢? 1. onload 事件 最基本的处理方式就是页面的 onload 事件,我们在处理这个事件的时候,可以有多种方式,即可以通过 HTML 方式,直接写在 body 元素的开始标记中,也可以使用事件注册的方式来...

4、node中的宏任务和微任务(大活和小活)

执行流程: 宏任务和微任务(一个宏任务配多个微任务):每次执行微任务队列会全部执行完并清空 console.log('main') process.nextTick( () => { console.log('process.nextTick1') }) setTimeout(() => { console.log('setTim...

setTimeout 传参

http://blog.useasp.net/archive/2012/11/03/the-problem-when-setTimeout-invoke-a-function-with-an-object-parameter.aspx javascript中setTimeout调用function时,传递参数的问题 在javascript中调用setT...

setTimeout、Promise、Async/Await 的区别

1、setTimeout console.log('script start') //1. 打印 script start setTimeout(function(){ console.log('settimeout') //4. 打印 settimeout }) //2. 调用 setTimeout 函数,并定义其完成后执...

Node.js 事件循环

本文地址 http://www.cnblogs.com/jasonxuli/p/6074231.html   原文:https://github.com/nodejs/node/blob/master/doc/topics/event-loop-timers-and-nexttick.md     >>> 文末有简单总结       什...