Переопределение CSS onclick с while и setTimeOut

Question

Я хочу изменить/переопределить свойство .left моего css с помощью javascript onclick. Это мне удалось сделать, только я хочу, чтобы свойство менялось поэтапно (каждые 1 сек), уменьшаясь на 5 м, пока не достигнет 0em. К сожалению, когда я нажимаю на идентификатор, чтобы запустить функцию, он просто перескакивает с 30em на 0em. Вместо 30,25,20,15,10,5 и т. Д. Каждые 1 сек. Есть идеи? (Нет JQuery, пожалуйста!)

window.onload = function(){ 
    document.getElementById("objection1").onclick = firstScroll; 
} 

function firstScroll(){ 

var content = document.getElementById("intB"); 
var thisNum = 30; 
var em = "em"; 

function doScroll(){ 
    content.style.left = thisNum+em; 
} 

while(thisNum > 0){ 
    setTimeout(doScroll, 1000); 
    thisNum -= 5; 
} 

} 

Answer 1

Ваша проблема в том, когда вы вызываете время цикла, следующий интервал не выстрелил еще, но ваш thisNum уже установлен на 0 после завершения цикла , Поэтому, когда doScroll уволен, thisNum уже 0.

Try:

window.onload = function(){ 
    document.getElementById("objection1").onclick = firstScroll; 
} 

var thisNum = 30; 
var em = "em"; 

function firstScroll(){ 
    setTimeout(doScroll, 1000); 
} 

function doScroll(){ 
    thisNum -= 5; 
    var content = document.getElementById("intB"); 
    content.style.left = thisNum+em; 
    if (thisNum > 0){ 
     setTimeout(doScroll, 1000); 
    } 
} 

Answer 2

Да, вы неоднократно декрементируете thisNum в цикле while. setTimeout - это функция, которая вызывается через одну секунду, но цикл while продолжает двигаться. doScroll должен декрементировать значение em, а не цикл while. Это использует setInterval вместо SetTimeout, но либо будет делать ..

var intTimer; 

function doScroll(){ 
    thisNum -= 5; 
    content.style.left = thisNum+"em"; 

    if (thisNum <= 0){ 
     window.clearInterval(intTimer); 
    } 
} 

intTimer = setInterval(doScroll, 1000);