JS执行控制节流模式实例分析

本文阐述了JS执行控制的节流方式。分享给大家参考，如下：

节流模式：控制重复的业务逻辑，执行最后一个操作，取消其他操作，提高性能。

重复的业务逻辑确实很烦人，但它往往包含优化的空间。

比如我们经常会遇到一种情况：当鼠标移动到容器中时，改变容器的颜色；当鼠标移出时，会恢复默认颜色。

但有时用户不小心进出，效果却消失了。这样的话，用户的体验是非常不好的。此时，我们可以使用节流模式。

节流模式的核心思想是创建计时器并延迟程序的执行。这也使得定时器中回调函数的操作异步执行，

源代码：

！doctype html head metharset=' utf-8 ' titlewww.jb51.net throttle试用版—— huansky/title/headsdy div id=' TTT ' p id=' t1 '我只在鼠标放置两秒钟后更改背景颜色。搬出去两秒多我就恢复了。/p br p id='t2 '我正常。只要鼠标移入，移出后恢复，我就会改变背景颜色。/p br p id='t3 '我将仅在鼠标放置两秒钟后更改背景颜色。恢复/p/div/body script/* * throttle * @ param is clear需要两秒多的时间才能获取传入的第一个参数* @param fn第二个参数表示函数* */var throttle=function(){ var is clear=arguments[0]，fn；if(is clear==' boolean '){ fn=参数[1]；//清除函数fn。_ throttishidcleartime out(fn。_ throttleid)如果函数的定时句柄存在；if(fn。_节流){ console.log(fn。_ throttle id)；} } else { fn=isclearparam=参数[1]；var p={ context:null，args:[]，time:800，}；//清除执行句柄函数arguments.callee(true，fn)；//是函数绑定定时器的句柄，会延迟函数fn的执行。_ throttle id=settimeout(function(){//console . log(fn。_ throttle id)；fn.apply(p.context，p . args)；}，p . time)} } var DOM=document . getelementsbytagname(' p ')；var entefn 1=function(){ DOM[0]. style . csstext=' background-color : yellow '；};var entefn 2=function(){ DOM[1]. style . csstext=' background-color : blue '；};var entefn 3=function(){ DOM[2]. style . csstext=' background-color : red '；};var entefn 11=function(){ DOM[0]. style . csstext=' background-color : # fff '；};var entefn 22=function(){ DOM[1]. style . csstext=' background-color : # fff '；};var entefn 33=function(){ DOM[2]. style . csstext=' background-color : # fff '；};dom[0]。addEventListener('mouseover '，function(){ throttle(true，entefn 11)；节气门(Entefn 1)；}，false)；dom[1]。addEventListener('mouseover '，Entefn2，false)；dom[2]。addEventListener('mouseover '，function(){ throttle(true，Entefn 33)；节气门(Entefn 3)；}，false)；dom[0]。addEventListener('mouseout '，function(){ throttle(entefn 11)；节气门(真，Entefn 1)；}，false)；dom[1]。addEventListener('mouseout '，Entefn22，false)；dom[2]。addEventListener('mouseout '，function(){ throttle(entefn 33)；节气门(真，Entefn 3)；}，false)；/script/html在这里，使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun对上面的代码进行了测试，运行效果如下：

更多对JavaScript相关内容感兴趣的读者可以查看本网站专题：《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript错误与调试技巧总结》和0103010

希望本文对JavaScript编程有所帮助。