setTimeout bỏ qua thời gian chờ? (Bắn ngay)

Question

Đây là lần đầu tiên tôi thực sự đi sâu vào JavaScript. Chắc chắn tôi đã sử dụng nó trước đây, nhưng tôi chưa bao giờ thực sự viết bất cứ điều gì từ đầu.

Dù sao, tôi đang gặp một vấn đề rất lạ mà tôi hy vọng ai đó có thể tìm ra cho tôi.

Tôi đang cố gắng tạo văn bản từ div phai từ đen sang trắng. Đơn giản, phải không?

Mã sau hoạt động. Nó sẽ thay đổi màu trắng, tuy nhiên, thời gian setTimeout 500ms đang bị bỏ qua.

Nếu bạn sử dụng Chrome và nhìn vào giao diện điều khiển JS, bạn sẽ dễ dàng thấy rằng phương thức doFade() đang được gọi gần như ngay lập tức, không phải mỗi 500 mili giây.

Có ai có thể giải thích điều này không?

var started = false; 
var newColor; 
var div; 
var hex = 0; 

function fadestart(){ 
    if (typeof fadestart.storedColor == 'undefined') { 
     div = document.getElementById('test'); 
     fadestart.storedColor = div.style.color; 
    } 
    if(!started){ 
     console.log('fadestart'); 
     newColor = fadestart.storedColor; 
     started = true; 
     setTimeout(doFade(), 500); 
    } 
} 

function fadestop(){ 
    console.log('fadestop'); 
    div.style.color = fadestart.storedColor; 
    started = false; 
    hex = 0; 
} 

function doFade(){ 
    if(hex<=238){ 
     console.log(hex); 
     hex+=17; 
     div.style.color="rgb("+hex+","+hex+","+hex+")"; 
     setTimeout(doFade(), 500); 
    } 
} 

Answer 1

Bạn cần loại bỏ các dấu ngoặc đơn trên doFade().

Dấu ngoặc đơn gọi hàm ngay lập tức.

Chỉ cần sử dụng này thay vì: doFade

Answer 2

setTimeout(doFade(), 500); 

Dòng này nói "thực hiện doFade(), sau đó vượt qua bất kỳ giá trị nó trở lại setTimeout, mà sẽ thực hiện giá trị trả về này sau 500 mili giây." Tức là, bạn đang gọi số doFade() ngay tại chỗ.

Bỏ qua dấu ngoặc đơn để qua chức năng setTimeout:

setTimeout(doFade, 500); 

Answer 3

Tôi nghĩ rằng bạn nên sử dụng setTimeout(doFade, 500); hoặc setTimeout("doFade()", 500);