2010-06-15 79 views
15

是否有一個函數會在兩行代碼之間添加時間延遲。不是settimeout,因爲settimeout在其參數中需要一個函數/對象。JavaScript中2行代碼之間的時間延遲,而不是settimeout

我尋找的是這樣的僞代碼

write "abc"; 
delay(500); 
write "xyz"; 

TIA

編輯: jimr的解決方案在我的其他thread工作了我的目的,所以是的robusto的。

我只是想知道爲什麼Robusto和CMS的鏈接給出的「睡眠」方法不是首選。這與settimeout方法有什麼不同,因爲它們都會在代碼中引入暫停? (settimeout在函數執行前暫停,sleep方法在下一行執行前暫停)。

+1

另請參閱:http://stackoverflow.com/questions/951021/javascript-sleep – CMS 2010-06-15 20:26:33

+1

沒有!!!!!!!!!!!!! – 2010-06-15 20:26:47

+0

感謝CMS !!!!!!!!!!! – Jamex 2010-06-15 20:48:32

回答

15

以下是笨重,醜陋,我永遠不會做它在我自己的代碼,我不建議這樣做在所有,但它表明,這樣的事情是可能的。

// time arg is in milliseconds 
function delay(time) { 
    var d1 = new Date(); 
    var d2 = new Date(); 
    while (d2.valueOf() < d1.valueOf() + time) { 
    d2 = new Date(); 
    } 
} 
+0

大聲笑我在jsfiddle上寫了一個自定義的睡眠自己,它的作品真的很難看:) – Anurag 2010-06-15 21:44:38

+19

這是一個可怕的,可怕的,可怕的想法。實際上,我想填寫評論欄中的「可怕」一詞,但有人可能會對評論進行修改。 **在其他人的CPU上燒時間是不禮貌的**。至少**有功能拒絕「延遲」超過1/4秒左右(250毫秒)。仍然粗魯,但至少它非常簡短。 – Pointy 2010-06-15 22:34:46

+0

波蒂說什麼。 – 2010-06-15 23:25:27

1

據我所知,setTimeout()是唯一的方法。

function write(out) { 
    alert(out); 
} 

// ... 

write('abc'); 
setTimeout(function() { write('xyz')}, 500); 
+0

謝謝,但settimeout不適用於我想要做的事情。 – Jamex 2010-06-15 20:46:26

12

睡眠法是不可用,因爲JavaScript執行塊的瀏覽器,因此睡眠法會阻止瀏覽器的500毫秒,你真的想擁有你的瀏覽器不響應了半個多秒?

按照建議使用setTimeout。

+0

謝謝,但settimeout不適用於我正在嘗試做的事。 – Jamex 2010-06-15 20:45:51

+10

@Jamex是的 - 你只需要調整你想要做的事情。在忙碌的循環中刻錄CPU時間是一個非常糟糕的主意,尤其是當您將它用於其他人的計算機時。 – Pointy 2010-06-15 22:35:57

12

可以使用的setTimeout所以,它幾乎出現在代碼運行在兩行:

write('abc') 
setTimeout(function() { 
write('xyz') 
},500) 
+1

謝謝,但settimeout不適用於我正在嘗試做的事情。 – Jamex 2010-06-15 20:45:15

3

我不知道你想在這裏做什麼,但在這裏是爲什麼定製睡眠可能無法滿足您的假設瀏覽器結冰工作一個具體的原因是一個非問題爲您服務。

你是否在這兩個寫命令之間操縱DOM?如果你是,那麼它根本不會工作(如最終用戶所感知的那樣),儘管DOM節點將在內存中構建/更新,但顯示不會被更新,因爲該部分不同步。處理器被鎖定在該循環中,並且當該循環結束時,兩個DOM更新都將在屏幕上刷新。請參閱example

理想情況下,您應該在屏幕上看到「Hello」和5秒後顯示「World」。但是,在Chrome,Safari和Firefox上,您會在5秒結束時看到「Hello」和「World」。控制檯日誌證明DOM節點構建在內存中,但直到結束時纔會刷新屏幕,就像您看到的那樣。

+0

非常好的一點! – Pointy 2010-06-15 23:51:19

+0

我試圖做一個document.onclick並獲取我點擊的任何元素的ID。問題是在settimeout之後,click事件丟失了。另一個用戶(jimr)非常友好,可以爲我保存一個簡短的例程。我不知道JS的語法足以理解好的代碼。我只寫僞邏輯代碼並嘗試搜索正確的語法,但如果我不知道關鍵詞/想法,則很難找到答案。謝謝。 – Jamex 2010-06-16 00:21:15

+2

@Jamex - 我想如果你用上述評論的細節更新問題,一旦用戶更好地理解問題,你會得到更多更有幫助和更好的答案。 – Anurag 2010-06-16 01:19:51

4

在JavaScript中1。7,使用yieldasync.js,你可以做到以下幾點:

var yourFunction = _(function() { 
    write("abc"); 
    yield to.sleep(.500); 
    write("xyz"); 
}); 
+0

感謝您的信息。看起來,收益率對許多人來說還是未知數。 – Jamex 2010-06-16 00:24:02

0

我錯過JavaScript的也一樣,沒有我的sleep()讓我失望,JavaScript中的Java SE和EE愛好者,我做了一個定時器和我希望能對你有用,它使用jQuery的,它是相當簡單的,你可以反向工程,並創建滿足您的需要的東西:

function timer(object, time) { 
 
    $(object).attr({ 
 
    'onclick': '' 
 
    }); 
 
    if (time < 0) { 
 
    $(object).attr({ 
 
     'onclick': "timer('#clock', 6000);" 
 
    }); 
 
    return; 
 
    } 
 
    $(object).animate({ 
 
    opacity: 1 
 
    }, 1, function() { 
 
    $(object).empty(); 
 
    $(object).append(time + 'ms'); 
 
    time--; 
 
    timer(object, time); 
 
    }); 
 
}
#clock { 
 
    width: 65px; 
 
    height: 20px; 
 
    border: 1px solid #F00; 
 
    text-align: center; 
 
    line-height: 20px; 
 
    background-color: #000; 
 
    color: #FFF; 
 
    font-weight: 900; 
 
}
<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 
 
    <title>HTML5, CSS3 and JavaScript demo</title> 
 
</head> 
 

 
<body> 
 
    <div id="clock" onclick="timer('#clock',6000);">--s</div> 
 
</body> 
 

 
</html>

0
setInterval(function delay{ //loops every 300 milliseconds 
    setTimeout(function firstLineOfCode(){ //waits 100 milliseconds then runs code 
     write('abc'); 
    },100) 
    setTimeout(function secondLineOfCode(){ //waits 200 milliseconds (100 after previous line) then runs code 
     write('def'); 
    },200) 
    setTimeout(function thirdLineOfCode(){ //waits 300 milliseconds (100 after previous line) then runs code 
     write('ghi'); 
    },300) 
},300) //loops after total of delays in function delay()