再谈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 中两个重要的方法,函数节流和函 ...
随机推荐
- 继承Runnable 实现Synchronized 同步锁
在java编程中,经常需要用到同步,而用得最多的也许是synchronized关键字了,下面看看这个关键字的用法. 因为synchronized关键字涉及到锁的概念,所以先来了解一些相关的锁知识. j ...
- YC全球总裁：我招揽陆奇好多年，如今终于如愿了！
简评:YC 老大多年来一直在努力招揽陆奇,终于如愿了. YC 总裁 Sam Altman 在 8 月 14 日,发布了关于陆奇以及 YC 中国的公告,全文如下: 我非常荣幸地宣布,陆奇加入 YC 并且 ...
- 哈工大ComingX-创新工场俱乐部正式成立
当我把这两个Logo放在一起的时候,我有一种感觉,这种感觉同样存在于ComingX队员的心中.大学我们走到了一起,非你我所预料,却又如此自然.在感恩节的零点,我迫不及待地告诉各位ComingX队员和关 ...
- Spring+SpringMVC+Mybatis整合redis
SSM整合redis redis是一种非关系型数据库,与mongoDB不同的是redis是内存数据库,所以访问速度很快.常用作缓存和发布-订阅式的消息队列. 这里用的是ssm框架+maven构建的项目 ...
- html5: 复制到剪贴板 clipboard.js
1.使用clipboard.min.js工具,引用此js 注意事项: IOS微信网页开发中,若使用此工具来开发复制功能,则需要在超链接/按钮上新增 onclick=" " 2.cl ...
- Android中9-Patch图片之理解
在android中,不仅可以将扩展名为.png,.jpg,.gif的普通图片作为图片资源,而且可以将扩展名为.9.png的9-Patch图片作为图片资源.扩展名为.png,.jpg,.gif的普通图片 ...
- 第一个hibernate程序HelloWorldHibernate
HelloWorldHibernate步骤: HelloWorld 1,新建java项目hibernate_0100_HelloWorld 2,学习User-library-hibernate,并加入 ...
- Win10双网卡不双待攻略
声明:本文与个人的技术兴趣毫无关系,只是因为有迫不得已的实际需求,才不得不想办法.所谓"艰难困苦,玉汝于成",大概就是这个道理.(PS:标题我没有写错,不是双网卡双待,就是双网卡但 ...
- FocusBI:租房分析&星型模型
微信公众号:FocusBI关注可了解更多的商业智能.数据仓库.数据库开发.爬虫知识及沪深股市数据推送.问题或建议,请关注公众号发送消息留言;如果你觉得FocusBI对你有帮助,欢迎转发朋友圈或在文章末 ...
- JDK1.7新特性(4):java语言动态性之反射API
直接通过一个代码示例来熟悉java中通过反射来对构造函数/域以及方法处理的相关API: package com.rampage.jdk7.chapter2; import java.lang.refl ...