关于节流的基础代码实现

最新推荐文章于 2024-04-03 13:08:44 发布

m0_50290125

最新推荐文章于 2024-04-03 13:08:44 发布

阅读量501

点赞数

文章标签： html5 html javascript

本文链接：https://blog.csdn.net/m0_50290125/article/details/120519146

版权

本文介绍了JavaScript中实现节流技术的两种方法：时间戳方式和定时器方式。节流技术用于限制函数的执行频率，确保在特定时间内只执行一次。通过示例代码详细解释了如何使用节流技术优化鼠标移动事件的处理，提高性能。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
   <style>
   #container{
   width: 100%; height: 200px; line-height: 200px; text-align: center; color: #fff; background-color: #444; font-size: 30px;
   }
   </style>
</head>

//看了这个表述，是不是感觉已经可以写出代码了…… 让我们来写第一版的代码：
function dar(func, wait){
   var kl,ol;
   var shijian=0
   return function(){
       //首先获得当前时间的时间戳，然后让当前的时间戳减去第一次点击的时候的变量
       //里面让当前的变量等于第一次点击的时间，然后再点击执行判断此时，shijian就是上一次点击的时间
       //gh-shijian就是上次到下一次点击的时间差，wait是我们输入的时间，然后判断是下次点击是否到时间了
       var date=new Date()
       var gh=date.getTime()
       kl=this
       ol=arguments
       if(gh-shijian>wait){
           func.apply(kl, ol);
           shijian = gh;
       }

   }
}
//第二版用定时器
//当触发事件的时候，我们设置一个定时器，再触发事件的时候，如果定时器存在，就不执行，直到定时器执行，然后执行函数，清空定时器，这样就可以设置下个定时器。
function dfg(fun,wait){
   var kl,ol
   var timeout;//这个是设置的定时器到时候会判断这个定时器存在不存在
   return function(){
       kl=this
       ol=arguments//这个是为了打印这个函数的对象就是上面函数传入的e
       if(!timeout){//代表这个定时器不存在
           timeout=setTimeout(function(){
               timeout=null//定时器执行完就清除了
               fun.apply(kl,ol)
           })
       }
   }
}
container.onmousemove =dar(getUserAction, 1000);

</script>
</body>
</html>

m0_50290125

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于节流的基础代码实现

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #container{ ...
复制链接

扫一扫