在foreach cshtml中等待Javascript函数完成？

我正在尝试使用Javascript进行简单的重新键入。我的问题是，如果从视图（.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>

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);
});

@foreach（模型中的变量温度）
{
自动类型（“ABCDEFG”，0）
}

它是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++;
    }
}

功能自动类型（wrt，i）{
wrt=wrt.分割（“”）；
无功延迟=100；
而（i

---

从这些代码中，输出将类似于“aaabbbccdddeeeffgfgg”，但我需要类似于“abcdefgabcdefeffggg”的输出。

我想你要找的是一台打字机，或电传打字机效果，其中的文本像打字机一样写出

在这种情况下，检查这个SO问题，因为它看起来会提供您所需要的

---

问题是

i

在循环结束时被设置为7，这发生在调用它的第一个实例之前。试着这样做：

<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>

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);
});

如果您感到好奇，将调用此方法。

您可以使用。在本例中，我必须使用两个递归函数，因为您需要对通过viewItems列表的迭代以及启动

setInterval（）

以更新每个字符的

#divAuto

进行流控制

作为如何在此处使用承诺来添加控件的示例，在

autoType（）

中，您将从新的

autoTypeUtil（）

返回一个承诺。当在

autoTypeUtil（）

中解析承诺时，您可以使用剩余列表再次调用

autoType（）

。这使您可以在异步运行时控制输入项的流

您可以查看以获取一个工作示例

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);

---

输出是“ABCDEFG”，而不是“aaabbbcc…”。我在我的复制中得到了这个

aaaaaabbbbbcccccccddddeee

。我真的怀疑你是否需要使用Razor在这样的循环中输出脚本。让脚本用于客户端行为，而使用Razor用于服务器端行为几乎总是更好的。您当然可以使用Razor来提供数据，以便客户端代码执行操作，但像这样尝试将两者混合使用会带来麻烦。