在Javascript中使用動畫算法

我正在使用Raphael.js可視化凸包算法。但是我希望能夠遍歷代碼的不同部分（或使用諸如sleep（）/ delay（））之類的東西。但是，我無法看到使用setTimeOut（）完成此操作的方法。有任何想法嗎？在Javascript中使用動畫算法

例如：

sort(points); 
//sleep(...)/delay(...)/pause until click? 
for(...) { 
    message('Foo thing'); 
    //sleep(...)/delay(...)/pause until click? 
    while() { 
     message('Comparing points'); 
     //sleep(...)/delay(...)/pause until click? 
    } 
}

A screenshot of the result of the algorithm. Points in red indicate an element of the convex hull.

來源

2012-11-23 blaze

沒有更多的解釋說明你是通過「遍歷代碼的不同部分」，而不看你的代碼，很不幸，不是很多。 –

增加了一個例子 – blaze

你的意思是你正在尋找模態消息框，就像'alert（）'創建的那樣？ –

在JavaScript中，無法使用sleep函數暫停代碼執行。執行JavaScript代碼被設計爲非阻塞。

使用debugger關鍵字的解決方案也適用於Chrome。您只需打開開發人員工具。

我準備的演示以不同的方式工作。它使用setInterval模擬sleep函數，並且不阻止腳本執行。但是，它涉及一些額外的代碼。

假設我們有初始代碼：

var arr = [0, 1, 2, 3, 4]; 

function step(val) { 
    console.log(val); 
} 

for (var i = 0, len = arr.length; i < len; i++) { 
    step(arr[i]); 
}

現在，我們想重寫它使每個日誌顯示一個之後第二：

var arr = [0, 1, 2, 3, 4], 
steps = []; 

function step(val) { 
    console.log(val); 
} 

for (var i = 0, len = arr.length; i < len; i++) { 
    steps[i] = step.bind(null, arr[i]); 
} 

var int = setInterval(function() { 
    var fun = steps.shift(); 
    if(!fun) { 
     clearInterval(int); 
     return; 
    } 
    fun(); 
}, 1000);

讓我解釋一下這一點位。首先，我定義了steps數組，其中我將新函數綁定了參數。 bind函數基本上創建了具有綁定到提供值的參數的新函數。有關MDN page的更多詳細信息。

例子：

function step(a) { console.log(a); } 
var step1 = step.bind(null, 1); 
// now step1 is like `var step1 = function() { console.log(1); }`

在for循環創建和使用bind提出了新的功能。最後一步是從steps數組中提取這些函數，從開始（使用Array.prototype.shift方法）開始，並以等於1秒的間隔執行它們。

我知道這不是你的問題的直接解決方案，但我希望它可以幫助你正確地轉換你的代碼。如果您決定這樣做，我建議將for和while循環內的代碼塊轉換爲函數。它簡化了一點轉換。

來源

2012-11-23 22:42:12 dreame4

也許你可以等待點擊一個按鈕，然後在點擊發生，你可以在步驟一行代碼？

設置按鈕的onclick監聽器並設置變量continue = true;這段代碼執行完後，你想等待下一段代碼運行，你可以使用它。

//code just executed 
while(continue == false) sleep(10); 
continue = false; 
//next code to be executed 
while(continue == false) sleep(10); 
continue = false; 
//more code....

有可能是一個比這更好的解決方案，所以不要把這個代碼作爲最好的，除非它是唯一的答案。

來源

2012-11-23 18:49:35

你能舉個例子嗎？我不清楚這個想法。 – blaze

javascript沒有睡眠功能，所以不會這樣做 – blaze

您可以嘗試使用瀏覽器上提供的調試工具。如果您使用的是Chrome瀏覽器，請按Shift + Ctrl + I啓用開發人員工具。如果您使用的是Firefox，則可以下載安裝Firebug擴展程序。一旦你完成了這些，你可以通過放置一個斷點來完成你的代碼。這通過放置'調試器'來完成。關鍵字在你想開始穿過的JavaScript點處。例如

sort(points); 
debugger 
for(...) { 
    message('Foo thing'); 
    debugger; 
    while() { 
    message('Comparing points'); 
    debugger; 
    } 
}

來源

2012-11-23 18:56:57 zana

在Javascript中使用動畫算法

回答

相關問題