Question

我试图用Javascript制作简单的自动版。我的问题是如果从视图（.cshtml）调用它，autotype就无法顺序运行。

我的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++;
    }
}

根据这些代码，输出将类似于＆＃34; AAABBBCCCDDDEEEFFFGGG＆＃34;但我需要输出如：＆＃34; ABCDEFGABCDEFGABCDEFG＆＃34;

Answer 1

我认为你要找的是打字机或电传打字机效果，文字写得像打字机一样？

在这种情况下，请查看此SO问题，因为它看起来会提供您所需要的内容。

Typewriter Effect with jQuery

Answer 2

问题是，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。

Answer 3

您可以使用jQuery deferreds执行此操作。在这种情况下，我必须使用两个递归函数，因为您需要通过viewItems列表进行迭代的流量控制，以及为每个字符启动setInterval()以更新#divAuto。

作为如何使用promises添加控件的示例，在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);

等在foreach cshtml里面完成Javascript功能？

3 个答案: