Javascript wie Intervallzeit einstellen zu stoppen

Question

Dies ist die Demo in jsfiddle ist, demo

Was ich will, die gescrollt Elemente (‚eins‘ wird lassen, ‚zwei‘, ‚drei‘, ‚4‘, " 5 ',' 6 ',' 7 ') scrollt automatisch nach oben, wie das Demo gezeigt hat, und stoppt 2 Sekunden, wenn es in der mittleren Position ist. Aber in meiner Demo wird es eine Weile nach dem Halt in der mittleren Position shack.

Hier ist der Platz in meinem Demo-Code für die Einstellung der Position.

if ((x == 0) || (x % 35== 0)) { 
    setTimeout(function() { 
     i.top = x + 'px'; 
    }, 1000); 
} else { 
    i.top = x + 'px'; 
} 

Jeder kann mir helfen? Vielen Dank!

UPDATE: Der Grund, warum ich 35 eingestellt habe, ist, weil ich festgestellt habe, dass die gescrollt Elemente in etwa in der mittleren Position sind, wenn es gleich 0, -35, -70, -105, .... Aber wenn ich trete alle x, fand ich, dass der Wert von x zwischen (31, -251) ist. Weißt du, wie man die genaue Position findet, wenn sich jedes Einzelteil in der Mitte der Position befindet? Vielen Dank!

Answer 1

i modifizierte Code ein bisschen,

gesetzt i eine Variable „k“, dass das Intervall zugeordnet ist, und ich deaktivieren Sie das Intervall auf Stop und Start wieder nach dem Timeout

für mich gut aussieht ->http://jsfiddle.net/ato0mf7u/3/ nicht lustig shakin mehr ;-D

window.onload = addScrollers; 


var i = 1; 
var arr = ['one ', 'two', 'three', '4', '5', '6', '7']; 
var mid; 
var k; 
function addScrollers() { 

    var txt = arr[0]; 
    while (i < arr.length) { 
     txt += '<p>' + arr[i] + '</p>'; 
     i++; 
    } 
    startScroll('myscroller', txt); 

} 

var speed = 10; // scroll speed (bigger = faster) 
var dR = false; // reverse direction 

var step = 1; 
function objWidth(obj) { 

    if (obj.offsetWidth) return obj.offsetWidth; 
    if (obj.clip) return obj.clip.width; 
    return 0; 
} 
function objHeight(obj) { 

    if (obj.offsetHeight) return obj.offsetHeight; 
    if (obj.clip) return obj.clip.height; 
    return 0; 
} 
function scrF(i, sH, eH) { 
    var x = parseInt(i.top) + (dR ? step : -step); 
    if (dR && x > sH) { 
     x = -eH; 
    } else if (x < 1 - eH) { 
     x = sH; 
    } 
    //when x is the times of 35, the positio is in middle 
    if ((x == 0) || (x % 35== 0)) { 
     clearInterval(k); 
     setTimeout(function() { 
      i.top = x + 'px'; 
      k = setInterval(function() { 

      scrF(i, sH, eH); 
      }, 1000/speed); 
     }, 1000); 

    } 
    else { 
     i.top = x + 'px'; 
    } 
    return x; 
} 
function startScroll(sN, txt) { 


    var scr = document.getElementById(sN); 
    var sW = objWidth(scr); 
    var sH = objHeight(scr); 
    scr.innerHTML = '<div id="' + sN + 'in" style="position:absolute; left:3px; width:' + sW + ';">' + txt + '<\/div>'; 
    var sTxt = document.getElementById(sN + 'in'); 
    var eH = objHeight(sTxt); 

    mid = (eH - sH)/2; 

    sTxt.style.top = (dR ? -eH : sH) + 'px'; 
    sTxt.style.clip = 'rect(0,' + sW + 'px,' + eH + 'px,0)'; 


    k = setInterval(function() { 

     scrF(sTxt.style, sH, eH); 
    }, 1000/speed); 

}