我正在尝试用 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”
最佳答案
您可以使用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);
关于javascript - 等待 Javascript 函数在 foreach cshtml 中完成?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27235531/