再谈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 中两个重要的方法,函数节流和函 ...
随机推荐
- Gym-101873D-Pants On Fire（闭包）
原题链接:2017-2018 ACM-ICPC German Collegiate Programming Contest (GCPC 2017) Pants On Fire Donald and M ...
- 架构师养成记--19.netty
一.Netty初步 为什么选择Netty? 和NIO比较,要实现一个通信要简单得很多,性能很好.分布式消息中间件.storm.Dubble都是使用Netty作为底层通信. Netty5.0要求jdk1 ...
- 架构师养成记--17.disrunptor 多生产者多消费者
入口: import java.nio.ByteBuffer; import java.util.UUID; import java.util.concurrent.CountDownLatch; i ...
- openproject安装与使用
思路: 1.生成config配置文件 2.导出配置文件,修改配置文件,删除容器,重新部署容器 3.登录后配置, 4.配置git,可以从openproject里查看gitlab上的代码库 第一次安装: ...
- VS2015编译器按F6不能够重新生成
工具-->选项-->环境-->键盘-->应用以下其他键盘映射方案,下拉选择 Visual C# 2005
- JS实现表格列宽拖动
在数据表格中,有时候需要拖动表格宽度,查看完整的数据,是很常用的功能. 1 效果 可以用纯JS就可以实现,如下,是正常情况下的表格: 拖动表格标题中间线,拖动后效果如下: 查看DEMO 2 代码 HT ...
- CentOS7 安装 PostGIS方法（适合国内网络）
安装Postgresql 9.4 yum install http://yum.postgresql.org/9.4/redhat/rhel-6-x86_64/pgdg-redhat94-9.4-1. ...
- hzjs颠覆jquery，按照中国人思维开发的最简洁的JQUERY替代品更简洁更高效
颠覆jquery,按照中国人思维开发的最简洁的JQUERY替代品 实现了类似JQUERY的选择器最核心的基本功能 如:$('#image2').attr("src") 另外提供了 ...
- python描述符学习
目录 一.对象属性的访问控制 二.描述符基本理解 三.基本使用 四.使用描述符完成property.classmethod.staticmethod自定义实现 1.property的自定义实现 2.c ...
- 角色用户权限RBAC
关于角色.用户.权限的表设计,已经成为经典中的经典,到处都在用,这里只是收录一下: 角色表:{role_id,role_name} 用户表:{user_id,user_name} 权限表:{permi ...