javascriptとSetintervalのシンプルオートスレーダー？

Question

私は私のシンプルなスライダーのためのいくつかのコードを記述しますが、いくつかのものは私はあなたがそれを再起動しsetIntervalを割り当てていないcanvasHeight

var myVar = setInterval(function(){ myTimer() }, 1000); 
    function myTimer() { 

      img.css({'top':- (height -canvasHeight) }) 
      canvasHeight+=100 
      var top = img.css('top') 

      if (top == '0px'){ 
       myStopFunction() 
       img.css({'top':-height}) 
       canvasHeight = 0 
       canvasHeight+=100 
       height = new $('img').height() - canvasHeight; 
       setInterval(function(){ myTimer() }, 1000); 
      } 
    } 

function myStopFunction() { 
    clearInterval(myVar); 
} 

https://jsfiddle.net/n1uzy4u3/

Answer 1

をリセットしたい間違っ

を実行しますmyVar変数であるため、次回クリアしようとすると、依然として元のコールのインターバルIDが使用されます。これにより、複数の間隔が実行されるため、複数の競合する関数の呼び出しが発生します。

また、カンマ区切り記号がないため、暗黙のグローバル変数がたくさんあります。

var img = $('img'), 
 
    time = 2000, 
 
    top = img.css('top'), 
 
    canvasHeight = 100, 
 
    height = $('img').height() - canvasHeight; 
 

 
img.css({ 
 
    'top': -height 
 
}) 
 

 
var myVar = setInterval(myTimer, 1000); 
 

 
function myTimer() { 
 
    img.css({ 'top': -(height - canvasHeight) }) 
 
    canvasHeight += 100 
 
    var top = img.css('top') 
 

 
    if (top == '0px') { 
 
    myStopFunction() 
 
    img.css({ 'top': -height }) 
 
    canvasHeight = 0 
 
    canvasHeight += 100 
 
    height = new $('img').height() - canvasHeight; 
 
    myVar = setInterval(myTimer, 1000); 
 
    } 
 
} 
 

 
function myStopFunction() { 
 
    clearInterval(myVar); 
 
}

.box { 
 
    position: relative; 
 
    width: 320px; 
 
    height: 100px; 
 
    margin: 0 auto; 
 
    overflow: hidden; 
 
} 
 

 
.scene { 
 
    height: 100%; 
 
    width: 100%; 
 
    float: left; 
 
    background-color: #996711; 
 
} 
 

 
.scene-element { 
 
    position: relative; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.scene-element img { 
 
    position: absolute; 
 
    -webkit-transition: all ease .8s; 
 
    -moz-transition: all ease .8s; 
 
    -o-transition: all ease .8s; 
 
    transition: all ease .8s; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="box"> 
 
    <div class="scene"> 
 
    <div class="scene-element"> 
 
     <img src="https://image.ibb.co/gXKiMR/01.png"> 
 
    </div> 
 
    </div> 
 
</div>

私はまた、あなたがsetIntervalに渡した匿名関数を削除しました。実行する他のコードがない場合は、呼び出す実際の関数を渡すことができます。