本文实例讲述了JS执行控制之节流模式。分享给大家供大家参考,具体如下:
<强>节流模式:对重复的业务逻辑进行控制,执行最后一次操作,并取消其他操作,以提高性能。
重复的业务逻辑真的很让人讨厌的,但其中往往蕴含着可被优化的空间。
比如我们经常碰到的一种情况:当鼠标移进容器的时候,改变容器的颜色,当鼠标移出去的时候,恢复默认颜色。
但是有时候是用户不小心移进来的,或者是不小心移出去的,但是效果却消失了。这样用户的体验效果是非常不好的,这时候,我们就可以利用节流模式。
源代码:
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> www.jb51.net节流器试用——huansky
& lt;/head>
& lt; body>
& lt; div id=八北?
& lt; p id=" t1 "在我只有在鼠标放置两秒后才改变背景色,移出超过两秒才恢复& lt;/p>
& lt; br>
& lt; p id=" t2 "在我是正常的,只要鼠标移进来就改变背景色,移出就恢复& lt;/p>
& lt; br>
& lt; p id=" t3 "在我只有在鼠标放置两秒后才改变背景色,移出超过两秒才恢复& lt;/p>
& lt;/div>
& lt;/body>
& lt; script>/* *节流器
* @param清晰获取传入的第一个参数
* @param fn第二个参数,表示函数
* */var节流=function () {
var是清晰[0]=参数,fn;
如果(typeof清晰===安级?{
fn=参数[1];//函数的计时句柄存在,就清除函数
fn。_throttleID,,clearTimeout (fn._throttleID);
如果(fn._throttleI) {
console.log (fn._throttleID);
}
}
其他{
fn=清晰;
param=参数[1];
var p={
背景:空,
参数:[],
时间:800年
}；//清除执行句柄函数
arguments.callee(真的,fn);//为函数绑定计时器的句柄,延迟执行函数
fn._throttleID=setTimeout(函数(){//console.log (fn._throttleID);
fn.apply (p.context p.args);
},p.time)
}
}
dom var=document.getElementsByTagName (“p”);
var Entefn1=function () {dom [0] .style.cssText=氨尘把丈?黄色;};
var Entefn2=function () {dom [1] .style.cssText=氨尘把丈?蓝色”;};
var Entefn3=function () {dom [2] .style.cssText=氨尘把丈?红”;};
var Entefn11=function () {dom [0] .style.cssText=癰ackground - color: # fff”;};
var Entefn22=function () {dom [1] .style.cssText=癰ackground - color: # fff”;};
var Entefn33=function () {dom [2] .style.cssText=癰ackground - color: # fff”;};
dom [0] .addEventListener(鼠标悬停,函数(){
节流(真的,Entefn11);
节流(Entefn1);
},假);
dom [1] .addEventListener(鼠标悬停,Entefn2、虚假);
dom [2] .addEventListener(鼠标悬停,函数(){
节流(真的,Entefn33);
节流(Entefn3);
},假);
dom [0] .addEventListener (“mouseout函数(){
节流(Entefn11);
节流(真的,Entefn1);
},假);
dom [1] .addEventListener (“Entefn22 mouseout”,假);
dom [2] .addEventListener (“mouseout函数(){
节流(Entefn33);
节流(真的,Entefn3);
},假);
& lt;/script>
& lt;/html>
之前
这里使用:http://tools.jb51.net/code/HtmlJsRun测试上述代码,运行效果如下:
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript操作DOM技巧总结》,《JavaScript页面元素操作技巧总结》,《JavaScript事件相关操作与技巧大全》,《JavaScript查找算法技巧总结》,《JavaScript数据结构与算法技巧总结》,《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
