再谈javascript函数节流
之前写过但是不记得在哪了，今天同事要一个滑到页面底部加载更多内容的效果，又想起了这玩意儿，确实挺实用和常用的，谨此记之。
函数节流从字面上的意思就是节约函数的执行次数，其实现的主要思想是通过定时器阻断函数的连续执行，尤其适合用在频繁操作，比如window的resize和scroll事件等。
window的默认scroll事件间隔时间大概只有十几毫秒，如果频繁的scroll，然后去请求，然后渲染，对性能肯定有很大的影响。
大概模式:
var processor = {
timer: null,
performProcessing: function(){
// 要执行的代码
},
process: function(){
clearTimeout(this.timer);
this.timer= setTimeout(function(){
processor.performProcessing();
}, 100);
}
};
//调用
processor.process();
performProcessing是要频繁执行的函数，每次process会把之前的定时器timer给清除掉。简单来说，就是performProcessing每次会延迟100ms执行，如果在这段时间内又被执行，每次都会把前面的给clear掉，保证100ms内只会执行一次。
impress通过闭包实现的函数节流：
function throttle(fn, delay) {
var timer = null;
return function () {
var context = this, args = arguments;
clearTimeout(timer);
timer = setTimeout(function () {
fn.apply(context, args);
}, delay);
};
}
两种方法各有优劣，前一个封装函数的优势在把上下文变量当做函数参数，直接可以定制执行函数的this变量；后一个函数优势在于把延迟时间当做变量。
举个栗子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
n=0;
function resizehandler(){
console.log(++n);
} function throttle(method,delay){
var timer=null;
return function(){
var context=this, args=arguments;
clearTimeout(timer);
timer=setTimeout(function(){
method.apply(context,args);
},delay);
}
}
window.onresize=throttle(resizehandler,500);//因为返回函数句柄，不用包装函数了
</script>
</body>
</html>
函数节流升级版
var throttleV2 = function(fn, delay, mustRunDelay){
var timer = null;
var t_start;
return function(){
var context = this, args = arguments, t_curr = +new Date();
clearTimeout(timer);
if(!t_start){
t_start = t_curr;
}
if(t_curr - t_start >= mustRunDelay){
fn.apply(context, args);
t_start = t_curr;
}
else {
timer = setTimeout(function(){
fn.apply(context, args);
}, delay);
}
};
};
window.onresize = throttleV2(myFunc, 50, 100);
升级版的作用是myFun间隔50ms执行一次，100ms内必须执行，因为有可能你在50ms内使劲执行myFun，这个时候timer会被clear掉，就会导致事件永远不会执行，这是比较极端的情况。
再谈javascript函数节流的更多相关文章
- 浅谈javascript函数节流
浅谈javascript函数节流 什么是函数节流? 函数节流简单的来说就是不想让该函数在很短的时间内连续被调用,比如我们最常见的是窗口缩放的时候,经常会执行一些其他的操作函数,比如发一个ajax请求等 ...
- 简述JavaScript函数节流
为什么要用函数节流 浏览器中某些计算和处理要比其他的昂贵很多.例如,DOM 操作比起非 DOM 交互需要更多的内存和 CPU 时间.连续尝试进行过多的 DOM 相关操作可能会导致浏览器挂起,有时候甚至 ...
- javaScript函数节流与函数防抖
javaScript函数节流与防抖之区别 函数防抖(debounce)与函数节流(throttle)都是为了限制函数的执行频次,以优化函数触发频率过高导致的响应速度跟不上触发频率,出现延迟.假死或卡顿 ...
- 再谈JavaScript的数据类型问题
JavaScript的数据类型问题已经讨论过很多次了,但许多人还有许多书仍然沿用着错误的.混乱的一些观点,所以就再细讲一回. 提及这个讨论的原因在于argb同学在我的MSN博客上的一段回复,又更早的起 ...
- [转载]浅谈JavaScript函数重载
原文地址:浅谈JavaScript函数重载 作者:ChessZhang 上个星期四下午,接到了网易的视频面试(前端实习生第二轮技术面试).面了一个多小时,自我感觉面试得很糟糕的,因为问到的很多问题都 ...
- 再谈javascript面向对象编程
前言:虽有陈皓<Javascript 面向对象编程>珠玉在前,但是我还是忍不住再画蛇添足的补上一篇文章,主要是因为javascript这门语言魅力.另外这篇文章是一篇入门文章,我也是才开始 ...
- 再谈 javascript 数组去重
前言 数组去重方法老生常谈,既然是常谈,我也来谈谈 双层循环 也许我们首先想到的是使用 indexOf 来循环判断一遍,但在这个方法之前,让我们先看看最原始的方法: var array = [1,1, ...
- [转]浅谈javascript函数劫持
转自:Ph4nt0m Security Team 这么多年了,现在学习依然还是有很多收货,向前辈致敬.转载一方面是自己存档一份,另一方面是让更多喜欢安全的人一同学习. ================ ...
- JavaScript 函数节流和函数去抖应用场景辨析
概述 也是好久没更新 源码解读,看着房价蹭蹭暴涨,心里也是五味杂陈,对未来充满恐惧和迷茫 ...(敢问一句你们上岸了吗) 言归正传,今天要介绍的是 underscore 中两个重要的方法,函数节流和函 ...
随机推荐
- IE下判断IE版本的语句...[if lte IE 6]……[endif]（用户判断IE版本的如果小于6就显示）
<!--[if lte IE 6]> <![endif]--> IE6及其以下版本可见 <!--[if lte IE 7]> <![endif]--> ...
- Oracle递归查询(start with)
写代码时碰到要弄清楚Oracle的role之间的传递关系,就是有role A的话,可以通过grant A to B,把A赋予给B,又通过grant B to C .那我想知道所有role中,有哪些ro ...
- OO第二单元の小结
第二单元(线程与电梯问题)总结博客 三次作业的设计策略 第一次:本次作业只有一部电梯,而且不用捎带.因此,我一共设计了两个线程:一个负责管理输入,一个负责电梯运行.同时,我将调度队列设置为单例模式,里 ...
- Protocol Buffers介绍及例子
Protocol Buffers介绍及例子 Protocol Buffers 是一种轻便高效的结构化数据存储格式,可以用于结构化数据串行化,或者说序列化.它很适合做数据存储或数据交换格式.可用于通讯协 ...
- Vue-cli 2.9 多页配置及多页面之间的跳转问题
vue开发,现在大部分做的都是(SPA)应用,但是,由于,需求不同,我们针对的用户需求变更较为,频繁,如果每次都全量打包更新,给开发的自测,及测试妹子的任务就会多,每次都要重新验证一下才放心.所以,想 ...
- 2016级算法第六次上机-D.AlvinZH的学霸养成记V
1081 AlvinZH的学霸养成记V 思路 中等题,计算几何. 这是一个排序问题,按极角排序.可以转化为叉积的应用,对于点A和B,通过叉积可以判断角度大小,共线时再判断距离. 叉积的应用.OA × ...
- L06-Ubuntu系统中部署Vagrant和VirtualBox
一.前言 1.Vagrant是一个搭建完整的虚拟开发环境的工具~~~更多关于Vagrant理论可查看这篇博文https://www.cnblogs.com/davenkin/p/vagrant-vir ...
- Go语言string包详解
strings包实现了用于操作字符的简单函数. 查找操作 判断给定字符串s中是否包含子串substr, 找到返回true, 找不到返回false func Contains(s, substr str ...
- PHPStorm操作小技巧
1.围绕选中字符输入引号或者括号 2.设置服务器部署 3.隐藏Project快捷键 Shift + Esc 4.IDE内窗口切换 Ctrl + TAB 5.关闭当前项目 File -> Clos ...
- Tomcat服务器安装配置
1.到http://tomcat.apache.org/官网下载Tomcat的zip版本,这样直接解压就行了,不用安装.我下载是Tomcat6.0版本的zip文件,解压在D:\Java\apache- ...