JS函数节流
背景:在前端开发中,有时会为页面绑定resize事件,或为一个页面元素拖拽事件(其核心就是绑定mousemove)在一个正常操作中也有可能在一个短时间内触发非常多次事件绑定程序,而DOM操作是很消耗性能的,如果为这些事件绑定一些操作DOM节点的操作的话就会引发大量的计算,在用户看来页面可能就一时间没有响应,这个页面就变卡变慢了,甚至在IE下,如果绑定的resize事件进行较多DOM操作,其高频率可能直接就使得浏览器崩溃。
函数节流简单讲就是让一个函数无法在很短的时间间隔内连续调用,只有当上一次函数执行后过了你规定的时间间隔,才能进行下一次该函数的调用。
函数节流原理:用定时器,当触发一个事件时,先setTimout让这个事件延迟一会再执行,如果在这个时间间隔内又触发了事件,那我们就clear掉原来的定时器,再setTimeout一个新的定时器延迟一会执行。
优缺点:
《JavaScript高级程序设计》中介绍的函数节流
function throttle(method,context){
clearTimeout(method,tId);
method.tId=setTimeout(function(){
method.call(context);
},100);
}
//调用
window.onresize=function(){
throttle(myFunc);
} //法二:
var throttle=function(fn,delay){
var timer=null;
return function(){
var context=this,args=arguments;
clearTimeout(timer);
timer=setTimeout(function(){
fn.apply(context,args);//context调用fn的方法,指针指向了fn
},delay);
}
}
//调用
window.onresize=throttle(myFunc,100);
函数节流让一个函数只有在你不断触发后停下来歇会才开始执行,中间你操作得太快它直接无视你。这样做就有点太绝了,resize一般还好,但假如写一个拖拽元素位置的程序,然后直接使用函数节流,会发现你拖动时元素是不动的,你拖完了它直接闪到终点去,所以进行优化:
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(!s_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);
解析:50ms的间隔内连续触发的调用,后一个调用会把前一个调用的等待处理掉,但每隔100ms至少执行一次。
1.具有节流效果的tab切换案例:
var timer=null;
function tab(obj){
var target = document.getElementById(obj);
var spans = target.getElementsByTagName("span");
var lis = target.getElementsByTagName("li");
for(var i=0;i<spans.length;i++)
{ spans[i].onmouseover = function(num){
return function(){
clearTimeout(timer);
timer=setTimeout(function(){
for(var j=0; j<spans.length;j++)
{
spans[j].className = "";
lis[j].className = "";
}
spans[num].className = "current";
lis[num].className = "show";
},300);
}
}(i);
spans[i].onmouseout=function(){
clearTimeout(timer);
}
} }
tab("one");
2.屏幕缩放节流案例:
<body>
<div id="demo"></div>
</body>
</html>
<script>
var demo=document.getElementById("demo");
var num=0;
window.onresize=throll(function(){
demo.innerHTML=window.innerWidth || document.documentElement.clientWidth;
num++;
alert(num);
},300);
function throll(fn,delay){
var timer=null;
return function(){
clearTimeout(timer);
timer=setTimeout(fn,delay);
}
}
</script>
JS函数节流的更多相关文章
- 也谈js函数节流
1.什么是js函数节流 其本质就是不让某些代码(函数)在没有间断的情况下连续重复执行,目的就是让执行函数的请求停止了一段时间后才执行. 2.函数节流运用的场景 窗口大小的改变(resize事件),滚动 ...
- js 函数节流和防抖
js 函数节流和防抖 throttle 节流 事件触发到结束后只执行一次. 应用场景 触发mousemove事件的时候, 如鼠标移动. 触发keyup事件的情况, 如搜索. 触发scroll事件的时候 ...
- Underscore.js 函数节流简单测试
函数节流在日常的DOM界面数据交互中有比较大的作用,可以减少服务器的请求,同时减少客户端的内存影响 Underscore.js 本省就包含了函数节流的处理函数 _.throttle 和 _.debo ...
- 结构-行为-样式-Js函数节流
最近一个面试官问了我一个函数节流的问题,然后感觉自己工作中遇到过这个问题,但是不知道这种形式就是函数节流.下面我来说下这个Js的高级问题,思路:函数节流就是防止用户高频调用某个事件而做的Js层面的处理 ...
- js 函数节流throttle 函数去抖debounce
1.函数节流throttle 通俗解释: 假设你正在乘电梯上楼,当电梯门关闭之前发现有人也要乘电梯,礼貌起见,你会按下开门开关,然后等他进电梯: 但是,你是个没耐心的人,你最多只会等待电梯停留一分钟: ...
- 深入理解JS函数节流和去抖动
一.什么是节流和去抖? 1.节流 节流就是拧紧水龙头让水少流一点,但是不是不让水流了.想象一下在现实生活中有时候我们需要接一桶水,接水的同时不想一直站在那等着,可能要离开一会去干一点别的事请,让水差不 ...
- JS函数节流和防抖
看JS高级程序设计时,了解到一个概念--函数节流,是为了防止在高频率触发某些事件导致浏览器崩溃.最近又了解到另一个概念,防抖,感觉和函数节流很像,也查看了很多篇博文,算是理解了. 区别: 函数节流:频 ...
- JS函数节流代码实现
函数被频繁调用场景 Js中的函数大多数情况下都是由用户主动调用触发的,一般不会遇到性能相关的问题.但在一些少数情况下,函数的触发不是由用户直接控制.在这些场景下,函数有可能被非常频繁地调用,而造成大的 ...
- JS 函数节流与防抖
前言 事件的触发权很多时候属于用户,可能会出现下列问题: 向后台发送数据,用户频繁触发,对服务器造成压力: 一些浏览器事件,如window.onresize,window.mousemove等,触发的 ...
随机推荐
- 我为什么还要造轮子?欠踹?Monk.UI表单美化插件诞生记!
背景 目前市场上有很多表单美化的UI,做的都挺不错,但是他们都有一个共同点,那就是90%以上都是前端工程师开发的,导致我们引入这些UI的时候,很难和程序绑定.所以作为程序员的我,下了一个决定!我要自己 ...
- CREATE TABLE 表名 AS SELECT 语句
1.新表不存在复制表结构即数据到新表 ? 1 2 create table new_table select * from old_talbe; 这种方法会将old_table中所有的内容都拷贝过来, ...
- 面向对象和面向过程的js版选项卡
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- Sqlserver 语法总结
修改列类型 alter table PRO_Element_b alter column matname varchar(1024) 更改一个表中的数据到另外一个表中 update a set a.n ...
- asp.net mvc4+mysql做一个简单分页组件(部分视图)
在开始做mysql分页功能组件前,便设定的是要有一定可复用性.先在项目里Views文件夹下右键新建名为_PaginationComponent.cshtml,这里html及css我采用的bootstr ...
- 快速上手php:使用PhpStrom调试php
闲话 使用phpStrom的时候居然不打印到控制台,要打印测试的话就要输出到页面,目前我还不知道有什么好办法像jsp一样输出到页面的同时也打印到控制台.这种做法还是比较烦的,特别出问题需要调试的时候. ...
- BZOJ3747: [POI2015]Kinoman
传送门 线段树经典运用. 设$last_i$表示上一个与$i$相同的类型.然后每次更新$[last[i]+1,i]$和$[last[last[i]]+1,last[i]]$的答案就行了. //BZOJ ...
- <<< Oracle表空间创建、修改、删除基本操作
ORACLE 中,表空间是数据管理的基本方法,所有用户的对象要存放在表空间中,也就是用户有空间的使用权,才能创建用户对象 create tablespace myts //建立表空间,名为mytsd ...
- CSS-背景渐变的兼容写法
background-image: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.5) 75%); background-image: - ...
- 【原】十张javascript思维导图
下面附上十张javascript思维导图,如果把里面的内容全部掌握,那就是高手了.思维导图提供给我们一个整体的知识体系,也可以说是一种工具,废话不多说,上图: 1.javascript数据类型 2.j ...