欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JavaScript函数节流的两种写法

程序员文章站 2022-06-05 22:46:01
最近看了函数节流的相关内容,具体什么是节流我不讨论了,网上很多,这里总结下两个方法,我只认可其中一个。另一个貌似也能达到节流的效果但是感觉不是很正规。 方法一:...

最近看了函数节流的相关内容,具体什么是节流我不讨论了,网上很多,这里总结下两个方法,我只认可其中一个。另一个貌似也能达到节流的效果但是感觉不是很正规。

方法一:

<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>函数节流</title>
 <style>
 div{
  font-size:40px;
  color:red;
  text-align: center;
 }
 </style>
</head>
<body>
<div>0</div>
 <script>
var a=0;
 var odiv=document.getelementsbytagname('div')[0];
 var throttle=function(fn,wait){
 var starttime=new date();
 return function(){
  var arg=arguments;
  var context=this;
  var curtime=new date();
  // 如果达到了规定的触发时间间隔,触发 handler
  var remaing=wait-(curtime-starttime)
  if(remaing<=0||remaing>wait){//按理说remaing足够证明已经到了时间间隔,但是为了防止客户端修改了时间所以加个条件(为什么这么加我也不懂)
  fn.apply(context,arg);
  starttime=curtime;
  }
 };
 };
 window.onmousemove=throttle(function(){
  a++;
  odiv.innertext=a+"";
 },2000);
 </script>
</body>
</html>

我比较认可这个方法,另外这是简洁版,还有一种可以是这样子的

function throttle(fun, delay, time) {
  var timeout,
    starttime = new date();
  return function() {
    var context = this,
      args = arguments,
      curtime = new date();
    cleartimeout(timeout);
    // 如果达到了规定的触发时间间隔,触发 handler
    if (curtime - starttime >= time) {
      fun.apply(context, args);
      starttime = curtime;
      // 没达到触发间隔,重新设定定时器
    } else {
      timeout = settimeout(function(){
       fun.apply(context, args);
      }, delay);
    }
  };
};

就是在判断完时间间隔后再加个计时器来延迟,这个我觉得加不加都行,加了也没错跟时间判断互补,不加也能实现节流的效果。

第二类写法:

<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>函数节流</title>
 <style>
 div{
  font-size:40px;
  color:red;
  text-align: center;
 }
 </style>
</head>
<body>
<div>0</div>
 <script>
 var a=0;
 var odiv=document.getelementsbytagname('div')[0];
 var throttle=function(fn,time){
  var timer=null;
  return function(){
  var arg=arguments;
  var context=this;
  if(timer){
   return false;
  }
  else{
  timer=settimeout(function(){
   cleartimeout(timer);
   timer=null;
   fn.apply(context,arg);
  },time);
  }
 };
 };
 window.onmousemove=throttle(function(){
   a++;
 odiv.innertext=a+"";
  },2000);
 </script>
</body>
</html>

这种写法通过判断是否存在正在进行的计时器来决定是否执行函数,存在就结束运行函数,但是那个计时器仍在队列里进行实践一到还会执行,通过运行也能达到节流,也就是间隔固定的时间触发函数,但是我就是不太喜欢这种写法。可能是这种方法没第一种直接吧。 

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!