Setting timing to jquery scripts

Question

My question is this: I have two jquery functions, and they both fill out fields in a form. Currently they run at the same time, but how can I get it run the second script only after the first is finished?

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

You can set the timers to be different? Or, put the second function inside the first one after it's finished? — tymeJV, Oct 31 '13 at 21:03
http://stackoverflow.com/questions/13030639/how-can-i-make-jquery-wait-for-one-function-to-finish-before-executing-another-f **OR** http://stackoverflow.com/questions/12116505/wait-till-a-function-is-finished-until-running-another-function `:))` — Tats_innit, Oct 31 '13 at 21:04

score 1 · Answer 1 · answered Oct 31 '13 at 21:12

After you clear the first you could start the second.

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

Or something similar.

score 0 · Answer 2 · edited May 23 '17 at 12:03

Something like this: reference Wait till a Function with animations is finished until running another Function

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

This might fit your needs :)

Code

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

Setting timing to jquery scripts

2 Answers2