Question

我的问题是：我有两个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);

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

或类似的东西。

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

设置jquery脚本的时间

2 个答案: