160722、Javascript函数节流
最近在做网页的时候有个需求，就是浏览器窗口改变的时候需要改一些页面元素大小，于是乎很自然的想到了window的resize事件,于是乎我是这么写的
<!DOCTYPE html>
<html>
<head>
<title>Throttle</title>
</head>
<body>
<script type="text/javascript">
n=0;
function resizehandler(){
console.log(new Date().getTime());
console.log(++n);
}
window.onresize=resizehandler;
</script>
</body>
</html>
功能倒是实现了，但是我拖拽的方式改变浏览器窗口大小的时候看了下控制台
没错，简单的一个拖拽让我的resizeHandler()方法执行了52次，这完全不是我想要的效果，实际上我的resizeHandler()方法的代码很复杂，甚至会使用ajax向服务器发送请求，要是简单的一次改变窗口大小就要调用52次这还了得
函数节流
其实我的本意只是窗口resize后页面做一些调整就可以，而window的resize事件并不是在resize结束后才触发的，具体则么个频率我也不知道，但却是在不停的调用，直到窗口大小不再变化。其实类似的机制还有鼠标的mousemove，都是在短时间内重复触发。
在《JavaScript高级程序设计》中有专门应对此问题的函数节流
function throttle(method,context){
clearTimeout(method.tId);
method.tId=setTimeout(function(){
method.call(context);
},500);
}
原理很简单，利用定时器，让函数执行延迟500毫秒，在500毫秒内如果有函数又被调用则删除上一次调用，这次调用500毫秒后执行，如此往复。这样我刚才的代码可以改为
<script type="text/javascript">
n=0;
function resizehandler(){
console.log(new Date().getTime());
console.log(++n);
}
function throttle(method,context){
clearTimeout(method.tId);
method.tId=setTimeout(function(){
method.call(context);
},500);
}
window.onresize=function(){
throttle(resizehandler,window);
};
</script>
拖拽一下试试，果真只执行了一次
另一种做法
网上还有一种函数节流方案，它是这么做的
function throttle(method,delay){
var timer=null;
return function(){
var context=this, args=arguments;
clearTimeout(timer);
timer=setTimeout(function(){
method.apply(context,args);
},delay);
}
}
调用一下试试，一样的效果
<script type="text/javascript">
n=0;
function resizehandler(){
console.log(new Date().getTime());
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>
比较
两种方法都是利用了setTimeout，不同的是第二种方法加入的函数延迟执行时间，这个在第一种方案中很容易也具有此功能，加一个参数的事儿。
但第一种方案把tId设为函数的一个变量保存，而第二种创建了一个闭包来存储。个人觉得差距不大，很喜欢第一种，简单，高效。
新需求
有一天做了个类似的东西，就像百度首页输入自动提示一样的东西，我在text上绑定keyup事件，每次键盘弹起的时候自动提示，但是又不想提示那么频繁，于是我用了上面方法，但是悲剧了，只有停止输入等500毫秒才会提示，在输入过程中根本就没有提示。看了一下代码，可不是嘛，只要是用户会盲打，在500毫秒内按一下键盘，提示函数就会不断被延迟，这样只有停下来的时候才会提示，这就没意义了。
能不能在函数节流的基础上间隔固定时间就执行一次？
小改动
在网上搜了一下我们可以根据第二种写法（第一种为函数拓展多个变量感觉有些不好）做些改动，添加一个参数作为到固定间隔必须执行
function throttle(method,delay,duration){
var timer=null, begin=new Date();
return function(){
var context=this, args=arguments, current=new Date();;
clearTimeout(timer);
if(current-begin>=duration){
method.apply(context,args);
begin=current;
}else{
timer=setTimeout(function(){
method.apply(context,args);
},delay);
}
}
}
这样每次我们判断间隔了多久，要是超过设置时间则立即执行一次，以刚才例子试一试效果
window.onresize=throttle(resizehandler,100,200);
果真既没有频繁执行也没有就最后执行
160722、Javascript函数节流的更多相关文章
- 浅谈javascript函数节流
浅谈javascript函数节流 什么是函数节流? 函数节流简单的来说就是不想让该函数在很短的时间内连续被调用,比如我们最常见的是窗口缩放的时候,经常会执行一些其他的操作函数,比如发一个ajax请求等 ...
- 简述JavaScript函数节流
为什么要用函数节流 浏览器中某些计算和处理要比其他的昂贵很多.例如,DOM 操作比起非 DOM 交互需要更多的内存和 CPU 时间.连续尝试进行过多的 DOM 相关操作可能会导致浏览器挂起,有时候甚至 ...
- javaScript函数节流与函数防抖
javaScript函数节流与防抖之区别 函数防抖(debounce)与函数节流(throttle)都是为了限制函数的执行频次,以优化函数触发频率过高导致的响应速度跟不上触发频率,出现延迟.假死或卡顿 ...
- Javascript函数节流
最近在做网页的时候有个需求,就是浏览器窗口改变的时候需要改一些页面元素大小,于是乎很自然的想到了window的resize事件,于是乎我是这么写的 <!DOCTYPE html> < ...
- JavaScript函数节流与函数去抖
介绍 首先解释一下这两个概念: 函数节流(throttle):是让一个函数无法在很短的时间间隔内连续调用,当上一次函数执行后过了规定的时间间隔,才能进行下一次该函数的调用. 函数去抖(debounce ...
- JavaScript函数节流（throttle）与函数去抖（debounce）
对于浏览器窗口大小改变的时候,来动态改变页面元素的大小,可以采用window的resize事件,实现代码: <script type="text/javascript"> ...
- 再谈javascript函数节流
之前写过但是不记得在哪了,今天同事要一个滑到页面底部加载更多内容的效果,又想起了这玩意儿,确实挺实用和常用的,谨此记之. 函数节流从字面上的意思就是节约函数的执行次数,其实现的主要思想是通过定时器阻断 ...
- JavaScript 函数节流和函数去抖应用场景辨析
概述 也是好久没更新 源码解读,看着房价蹭蹭暴涨,心里也是五味杂陈,对未来充满恐惧和迷茫 ...(敢问一句你们上岸了吗) 言归正传,今天要介绍的是 underscore 中两个重要的方法,函数节流和函 ...
- javascript 函数节流方法
函数节流可以缓解调用的次数,代码如下: function throttle(method,delay){ var timer=null; return function(){ var context= ...
随机推荐
- js根据对象的某一属性进行排序
function compare(property) { return function (a, b) { var value1 = new Date(a[property]); var value2 ...
- sql getdate()生成单据号
select replace( replace( replace( replace(convert(varchar(23),getdate(),121),'-',''),':',''),' ','') ...
- Python基础--字典：当索引不好用时
当列表或是元组的索引不能达到我们的目的时,我们想到了还有一种序列,即字典. 创建 字典 由多个键以及相应的值构成的键-值对组成. 键唯一.值能够不唯一 phonebook = {'xidada':'1 ...
- 使用DataAdpater自动批量更新DataSet中的数据到数据库
使用DataAdpater的批量更新,好处是不用写具体的sql脚本,尤其是做web服务这个优势非常吸引人. [WebMethod(Description = "Update服务提供的方法,将 ...
- 解决WinForm界面闪烁问题
前言 之前將.net 1.1 Windows Form程式升級到.net 4.0,結果在開畫面時,閃的非常利害! 於是就開始找解決方法. 研究及解決 開始找到了設定DoubleBuffer=true ...
- Java并发编程（一）：并发与高并发等基础概念
并发概念 同时拥有两个或者多个线程,如果程序在单核处理器上运行,多个线程将交替地换入或者换出内存,这些线程是同时存在的,每个线程都处于执行过程中的某个状态.如果运行在多核处理器上,程序中的每个线程都将 ...
- 网络结构----ISO/OSI七层网络模型和TCP/IP四层网络模型
对等实体在一次交互作用中传送的信息单位称为协议数据单元.它包含控制信息和用户数据两部分. 上下层实体之间的接口称为服务訪问点. ISO/OSI參考模型分为:物理层.数据链路层.网络层.传输层.会话层. ...
- C#中Equals和==的比较
一.值类型的比较 对于值类型来说 两者比较的都是”内容”是否相同,即 值 是否一样,很显然此时两者是划等号的. ; ; Console.WriteLine("i==j"+(i== ...
- vue 插件
开发插件 插件通常会为vue添加全局功能,插件的范围没有限制--一般有下面几种: 1,添加全局方法或者属性,例:vue-coustom-element 2,添加全局资源:指令.过滤器,.过渡等,如vu ...
- dedecms安全篇：织梦文件夹目录权限设置
织梦各个目录安全详解 做织梦(dedecms)网站安全必看1.a 因为是静态目录,并且在要生成HTML的,所以拒绝脚本执行 允许写入2.data 因为是缓存等,所以充许写入,但是因为这里面 ...