为 jquery 脚本设置时间答案

【问题标题】：Setting timing to jquery scripts为 jquery 脚本设置时间
【发布时间】：2013-10-31 21:01:18
【问题描述】：

我的问题是：我有两个 jquery 函数，它们都填写表单中的字段。目前它们同时运行，但我怎样才能让它在第一个脚本完成后才运行第二个脚本？

var string  = 'joe@quadwtech.com',
    letters = string.split(''),
    total   = letters.length,
    index   = 0,
    timer   = setInterval(function () {
        if (index < total) {
            $('input[name="email"]').val(function () {
                return $(this).val() + letters[(index++)];
            });
        } else {
            clearInterval(timer);
        }
    }, 100);
var stringtwo  = 'Jason',
    ttert = stringtwo.split(''),
    totaltwo   = ttert.length,
    countt   = 0,
    timer   = setInterval(function () {
        if (countt < totaltwo) {
            $('input[name="first"]').val(function () {
                return $(this).val() + ttert[(countt++)];
            });
        } else {
            clearInterval(timer);
        }
    }, 100);

【问题讨论】：

你可以设置不同的定时器吗？或者，完成后将第二个函数放入第一个函数中？
stackoverflow.com/questions/13030639/… 或 stackoverflow.com/questions/12116505/… :))
你正在覆盖你的 timer var，仅供参考

标签： jquery

【解决方案1】：

清除第一个后，您可以开始第二个。

var string  = 'joe@quadwtech.com',
letters = string.split(''),
total   = letters.length,
index   = 0;

var timer   = setInterval(function () {
    if (index < total) {
        $('input[name="email"]').val(function () {
            return $(this).val() + letters[(index++)];
        });
    } else {
        clearInterval(timer);
        var stringtwo  = 'Jason',
            ttert = stringtwo.split(''),
            totaltwo   = ttert.length,
            countt   = 0;

        timer = setInterval(function () {
                         if (countt < totaltwo) {
                             $('input[name="first"]').val(function () {
                                 return $(this).val() + ttert[(countt++)];
                             });
                         } else {
                             clearInterval(timer);
                         }
                      }, 100);
    }
}, 100);

或类似的东西。

【讨论】：

【解决方案2】：

类似这样的：参考 Wait till a Function with animations is finished until running another Function

API：http://api.jquery.com/deferred.done/

这可能符合您的需求:)

代码

var FunctionOne = function () {
  var string  = 'joe@quadwtech.com',
    letters = string.split(''),
    total   = letters.length,
    index   = 0,
    timer   = setInterval(function () {
        if (index < total) {
            $('input[name="email"]').val(function () {
                return $(this).val() + letters[(index++)];
            });
        } else {
            clearInterval(timer);
        }
    }, 100);
};

// define FunctionTwo as needed
var FunctionTwo = function () {

var stringtwo  = 'Jason',
    ttert = stringtwo.split(''),
    totaltwo   = ttert.length,
    countt   = 0,
    timer   = setInterval(function () {
        if (countt < totaltwo) {
            $('input[name="first"]').val(function () {
                return $(this).val() + ttert[(countt++)];
            });
        } else {
            clearInterval(timer);
        }
    }, 100);
};

// call FunctionOne and use the `done` method
// with `FunctionTwo` as it's parameter
FunctionOne().done(FunctionTwo);

【讨论】：