• 欢迎关注我的微信公众号“ frontEnd_Developer ” 右边扫描关注 --->>

一个循环和定时器问题 引发的血案

Code Log 神棍 546℃ 0评论

大姐想用do while做一个定时器的循环,所做的事,初始值0 递增+1,到5的时候递减-1到0,然后继续无限重复
也是就是和 先从0加到5 然后再从5减到0,这样一直循环下去。

大姐给出的代码:

      var initial = 0;
      do {
        setInterval(function() {
          if(initial==5){
            initial--;
          }else if(initial==0){
            initial++;
          }
          $(".result3").html(initial);
        },1000);

      }while(???);

首先这里,我们进入了一个误区,利用 do{} while() 循环来做一个 无限重复的事,虽然是循环,但是也会进入死循环当中, 浏览器进入假死状态

这里 定时器,也是属于循环的一种!但是他是按照我设定的时间来循环。这样无疑就比一般的循环好多了,那么我们就抛开do while循环,只使用定时器就可以了

我给出的一段代码:

  var initial = 0,s=false;
  setInterval(function() {
    if(initial<=5&&s==false){ initial++; if(initial>5){
        s=true
      }
    }
    if(initial>0&&s==true){
      initial--;
      if(initial<1){
        s=false
      }
    }
    $(".result3").html(initial);
  },1000);

虽然目的达到了,但是代码看起来还是比较繁琐的。不太理想。

大姐在网上搜集了一段代码,我们来看看:

      var step = 1, counter = 0 ;
      setInterval(function(){
        counter+=step;
        if(counter>=10){
          step = -1;
        }else if(counter<=0){
          step = 1
        }
        $(".result2").html(counter);
      },1000);

代码明显看起来,比上面的代码要少的多,而且做了相同的事,这里我们的思路都差不多,都是两个变量来控制的;但是if else if 的使用,就要比上面的代码好的多了

再来看看大姐老大给的代码:

      var bool=false;var i=0;
      setInterval(function(){
        if(!bool){
          i++;
          bool=i==10;
        } else{
          i--;
          bool= i!==0;
        }
      $(".result1").html(i);
      },1000);

这三段代码的思路都差不多,使用的方法不同,用到的知识也是不同的,一个比一个好。这个用到了 false = 0

只能说我初入前端界,还是太嫩了,希望各位同仁,多多指教!

转载请注明:Falost的小窝 » 一个循环和定时器问题 引发的血案

如果你觉得这篇文章不错或者对你有帮助,想请我喝一杯咖啡,可以打赏
喜欢 (11)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址