Javascript làm thế nào để thiết lập khoảng thời gian để ngăn chặn di chuyển

Question

Đây là bản demo trong jsfiddle, demo

Những gì tôi muốn là để cho các mặt hàng cuộn ('one', 'hai', 'ba', '4', ' 5 ',' 6 ',' 7 ') tự động cuộn lên như bản trình diễn đã hiển thị và dừng 2 giây khi nó ở vị trí giữa. Nhưng trong bản demo của tôi, nó sẽ ngừng một lúc sau khi dừng ở vị trí giữa.

Đây là nơi trong mã demo của tôi cho vị trí thiết lập.

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

Bất kỳ ai có thể giúp tôi? Cảm ơn!

CẬP NHẬT: Lý do tôi đặt 35 là vì tôi thấy rằng các mục được cuộn gần như ở vị trí giữa khi nó bằng 0, -35, -70, -105, .... Nhưng khi tôi điều khiển tất cả x, tôi thấy rằng giá trị của x là giữa (31, -251). Bạn có biết cách tìm vị trí chính xác khi mỗi mục ở giữa vị trí không? Cảm ơn!

Answer 1

tôi đổi mã của bạn một chút,

tôi đặt một biến "k" rằng khoảng cách được gán cho và tôi xóa khoảng trên dừng và khởi động lại sau khi thời gian chờ

vẻ tốt đối với tôi ->http://jsfiddle.net/ato0mf7u/3/ không shakin hài hước nữa ;-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); 

}