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

Question

我正在尝试用 Javascript 制作简单的自动输入。我的问题是，如果我从 View (.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”

Answer 1

您可以使用jQuery deferreds来做到这一点。在这种情况下，我必须使用两个递归函数，因为您需要通过 viewItems 列表进行迭代以及启动 setInterval() 来更新 #divAuto 的流程控制对于每个 Angular 色。

作为此处如何使用 Promise 来添加控制的示例，在 autoType() 中，您将获得从新的 autoTypeUtil() 返回的 Promise。当在 autoTypeUtil() 中解决 Promise 时，您可以使用剩余的列表再次调用 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);