あのときコード

時間差処理

2019/03/04

javascript jQuery Deferred delay

時間差で処理を実行

順番に行うアニメーション等、時間差をつけて処理を実行したい場合の対応方法の一つ

各処理を作成

◆ 条件

処理1：proc01

divにクラス「class-a」を追加

処理後、1秒のdelayをいれる

処理2：proc02

pにクラス「class-b」を追加

function proc01 {
    var d = new $.Deferred;
    $('div').addClass('class-a').delay(1000).queue(function () {
        d.resolve();
    });

    return d.promise();
}
function proc02() {
    var d = new $.Deferred;
    $('p').addClass('class-b').queue(function () {
        d.resolve();
    });

    return d.promise();
}

処理をつなげる

proc01().then(proc02);

引数を渡したい場合

function startAmin(arg) {
	amin01(arg).then(amin02)
}

function amin01(arg) {
	var d = new $.Deferred();

	setTimeout(function(){
		
                /*処理*/

		d.resolve(arg);
	}, 500);
	return d.promise();
}

function amin02(arg) {
	var d = new $.Deferred();

	setTimeout(function () {

                /*処理*/

		d.resolve(arg);
	}, 500);

	return d.promise();
}