等待JavaScript函數在foreach cshtml裏面完成？

我正在嘗試使用Javascript進行簡單的autotype。我的問題是，如果我從視圖（.cshtml）調用它，autotype是無法順序運行的。等待JavaScript函數在foreach cshtml裏面完成？

我CSHTML這樣的：

<script type="text/javascript" src="@Url.Content("/Scripts/autotype.js")"></script> 

@foreach (var temp in @Model) 
{ 
    <script> 
     auto_type("ABCDEFG", 0) 
    </script> 
} 

<div id="divauto"></div>

，它的autotype.js：

function auto_type(wrt, i) { 

    wrt = wrt.split(''); 
    var delay = 100; 
    while (i < wrt.length) { 
     setTimeout(function() { 
      $('#divauto').append(wrt.shift()) 
     }, delay * i) 
     i++; 
    } 
}

從這些代碼，輸出會像「AAABBBCCCDDDEEEFFFGGG」但我需要像輸出：「ABCDEFGABCDEFGABCDEFG 「

來源

2014-12-01 satisfy

輸出是「ABCDEFG」，而不是「AAABBBCCC ...」。 – 2014-12-01 19:24:26

我在我的repro中得到這個'AAAAABBBBBCCCCCDDDDDEEEEE'。 – 2014-12-01 19:28:46

我真的懷疑，如果你需要使用Razor來輸出腳本，像這樣的循環。將腳本保留爲客戶端行爲幾乎總是更好，並將Razor用於服務器端行爲。您可以確定使用Razor爲您的客戶端代碼提供數據以執行操作，但試圖將這兩者混合起來會造成麻煩。 – 2014-12-01 22:57:05

我認爲你要找的是打字機還是電傳打字機，其中的文字是像打字機一樣寫出來的？

在這種情況下，看看這個SO問題，因爲它看起來會提供你所需要的。

Typewriter Effect with jQuery

來源

2014-12-01 19:38:04

問題是i是越來越在你的循環，發生被稱爲它的第一個實例之前結束設置爲7。嘗試是這樣的：

function auto_type(wrt) { 
    wrt = wrt.split(''); 
    if (wrt.length > 0) { 
     var delay = 100; 
     type_loop(wrt, delay);  
    } 
} 

function type_loop(wrt, delay) { 
    var myTimeout = setTimeout(function() { 
     clearTimeout(myTimeout); 
     $('#divauto').text($('#divauto').text() + wrt.shift()); 
     if (wrt.length > 0) { 
      type_loop(wrt, delay); 
     } 
    }, delay); 
} 

$(document).ready(function() { 
    auto_type("ABCDEFG", 0); 
});

這種方法被稱爲tail recursion如果你很好奇。

來源

2014-12-01 20:05:04 charles

您可以使用jQuery deferreds來完成此操作。在這種情況下，我必須使用兩個遞歸函數，因爲您需要通過viewItems列表進行迭代的流量控制，以及爲每個字符啓動setInterval()以更新#divAuto。

作爲如何使用承諾來添加控件的示例，在autoType()中，您獲得了從新autoTypeUtil()返回的承諾。當承諾在autoTypeUtil()內得到解決時，您可以再次撥打autoType()與剩餘清單。這使您可以在異步運行時控制輸入項目。

您可以查看fiddle的工作示例。

function timeString(arr, timeFactor, deferred) { 
    if (arr.length === 0) { deferred.resolve(); } 

    var ch = arr.shift(); 
    var deferredInternal = new $.Deferred(); 
    var promise = deferredInternal.promise(); 
    var delay = 100; 

    setTimeout(function() { 
     $('#divauto').append(ch); 
     deferredInternal.resolve("done"); 
    }, delay * timeFactor) 

    promise.done(function() { 
     timeString(arr, timeFactor, deferred); 
    }); 
} 

function autoTypeUtil(inputString, timeFactor) { 
    var deferredTimeString = new $.Deferred(); 
    var deferredInternal = new $.Deferred(); 
    var promiseTimeString = deferredTimeString.promise(); 

    inputString = inputString.split(''); 
    timeString(inputString, timeFactor, deferredTimeString); 

    promiseTimeString.then(function() { 
     deferredInternal.resolve() 
    }); 
    return deferredInternal.promise(); 
} 

function autoType(arr, timeFactor) { 
    if (arr.length === 0) { return; } 

    var promise = autoTypeUtil(arr.shift(), timeFactor); 

    promise.done(function() { 
     autoType(arr, timeFactor); 
    }); 
} 

var viewItems = ["I", "love", "jQuery", "promises"]; 
autoType(viewItems, 1);

來源

2014-12-01 22:51:21 anthonyserious

等待JavaScript函數在foreach cshtml裏面完成？

回答

相關問題