javascriptのPromiseの使い方がよくわかりません。

Question

実現したいこと

下記のように順番にjsが動くようにしたくて、そのためにPromiseを使いたいのですが、
使い方が間違っているのか・・・動きません。

1,【load.js】が動き、終わる。
2,【moji_move1.js】が動き、終わる
3,【id=test】の文字が消える
4,【moji_move2.js】が動く

ちなみに、それぞれのjsは別々のファイルで分けているのですが、
Promiseを使うために一つにまとめて作成し直しているのですが、
それだと正直わかりづらいので、できれば、【load.js】【moji_move1.js】などファイルを分けてやりたいのですが、それが可能でしたら、その方法でのやり方とかありますでしょうか？

なければPromiseで作成したいです。
一つ一つのjsは動く事は確認済なのですが、Promiseに入れると全く動かなくなります。

HTML

 <div id="splash">
    <div id="splash_text"></div>
  </div>



		<div id="slider">
			<p id="test" class="TextRandomAnime head">先に動いて消える文字</p>
			<h1><span class="blurTrigger">次に出てきて、そのままずっと残る文字</span></h1>
		</div>

load.js

var bar = new ProgressBar.Line(splash_text, {
  easing: 'easeInOut'
  duration: 5000,
  strokeWidth: 10.2,
  color: '#555'
  trailWidth: 0.2,
  trailColor: '#bbb',
  text: {    
    style: {
      position: 'absolute',
      left: '50%',
      top: '50%',
      padding: '0',
      margin: '-30px 0 0 0',
      transform:'translate(-50%,-50%)',
      fontsize: '1rem',
      color: '#fff',
    },
    autoStyleContainer: false
  },
  step: function(state, bar) {
    bar.setText(Math.round(bar.value() * 100) + ' %');
  }
});


bar.animate(1.0, function () {
  $("#splash").delay(500).fadeOut(800);
});  

moji_move1.js

function TextRandomAnimeControl() {
  $('.TextRandomAnime').each(function () {
    var elemPos = $(this).offset().top - 50;
    var scroll = $(window).scrollTop();
    var windowHeight = $(window).height();
    if (scroll >= elemPos - windowHeight) {
      $(this).addClass("appearRandomtext");

    } else {
      $(this).removeClass("appearRandomtext");
    }
  });
}

$(window).scroll(function () {
  TextRandomAnimeControl();
});


$(window).on('load', function () {
  var element = $(".TextRandomAnime");
  element.each(function () {
    var text = $(this).text();
    var textbox = '';
    text.split('').forEach(function (t) {
      textbox += '<span>' + t + '</span>';
    });
    $(this).html(textbox);
  });

  TextRandomAnimeControl();
});

id=test

var ele = document.getElementById('test');
	ele.style.display = 'none';

moji_move2.js

function BlurTextAnimeControl() {
  $('.blurTrigger').each(function(){ 
    var elemPos = $(this).offset().top-50;
    var scroll = $(window).scrollTop();
    var windowHeight = $(window).height();
    if (scroll >= elemPos - windowHeight){
    $(this).addClass('blur');
    }else{
    $(this).removeClass('blur');
    }
    });
}


$(window).scroll(function () {
  BlurTextAnimeControl();
});


$(window).on('load', function () {
  BlurTextAnimeControl();
});

試したこと

Promiseの参考サイトを元にjsを書き換えましたが、全く動きません。

function promiseOne() {
  return new Promise(resolve => {
    setTimeout(() => {
     
		
var bar = new ProgressBar.Line(splash_text, {
  easing: 'easeInOut',
  duration: 5000,
  strokeWidth: 10.2,
  color: '#555',
  trailWidth: 0.2,
  trailColor: '#bbb',
  text: {     
    style: {
      position: 'absolute',
      left: '50%',
      top: '50%',
      padding: '0',
      margin: '-30px 0 0 0',
      transform:'translate(-50%,-50%)',
      fontsize: '1rem',
      color: '#fff',
    },
    autoStyleContainer: false 
  },
  step: function(state, bar) {
    bar.setText(Math.round(bar.value() * 100) + ' %'); 
  }
});


bar.animate(1.0, function () {
  $("#splash").delay(500).fadeOut(800);
});  
		
		
		
		
		
		
    }, 1000) 
  })
}

function promiseTwo() {
  return new Promise(resolve => {
    setTimeout(() => {
     
		
		
		
		
		
	
function TextRandomAnimeControl() {
  $('.TextRandomAnime').each(function () {
    var elemPos = $(this).offset().top - 50;
    var scroll = $(window).scrollTop();
    var windowHeight = $(window).height();
    if (scroll >= elemPos - windowHeight) {
      $(this).addClass("appearRandomtext");

    } else {
      $(this).removeClass("appearRandomtext");
    }
  });
}


$(window).scroll(function () {
  TextRandomAnimeControl();
});

$(window).on('load', function () {

  var element = $(".TextRandomAnime");
  element.each(function () {
    var text = $(this).text();
    var textbox = '';
    text.split('').forEach(function (t) {
      textbox += '<span>' + t + '</span>';
    });
    $(this).html(textbox);
  });

  TextRandomAnimeControl();
});
		
		
		
		
		
		
		
		
    }, 1000) 
  })
}

function promiseThree() {
  return new Promise(resolve => {
    setTimeout(() => {
      
		
		var ele = document.getElementById('test');
	ele.style.display = 'none';
		
		
		
		
    }, 1000) 
  })
}







function promiseFour() {
  return new Promise(resolve => {
    setTimeout(() => {
      
		
	

function BlurTextAnimeControl() {
  $('.blurTrigger').each(function(){
    var elemPos = $(this).offset().top-50;
    var scroll = $(window).scrollTop();
    var windowHeight = $(window).height();
    if (scroll >= elemPos - windowHeight){
    $(this).addClass('blur');
    }else{
    $(this).removeClass('blur');
    }
    });
}


$(window).scroll(function () {
  BlurTextAnimeControl();
});


$(window).on('load', function () {
  BlurTextAnimeControl();
});
		
		
		
		
    }, 1000) 
  })
}



promiseOne()
  .then(one => { 
  return promiseTwo() 
})
  .then(two => { 
    return promiseThree() 
})
  .then(three => { 
	return promiseFour()
})
 .then(Four => { 

})

Comments

[int32_t]

promiseOne() 〜 promiseFour() をどうやって呼んでいるのでしょうか。

[samasa]

コメントありがとうございます。質問を修正したのでご確認よろしくお願いいたします。

Answer 1

Promiseの使い方としては、resolve() を呼んでないという間違いがあります。しかし、そこを直しても期待通りには動かないと思います。load イベントリスナで行っている処理がありますが、load イベントリスナの登録を遅延させると load イベントに間に合わないためです。

各.jsファイルを無修正で希望の動作にすることはできません。ファイルを分割したままにすることはできますが、それぞれに修正が必要です。

例えば以下のような修正になるでしょう:

load.js

• 以下の関数を追加。

function promiseOne() {
  return new Promise(resolve => setTimeout(resolve, 1300));
}

moji_move1.js

• load イベントリスナ内の TextRandomAnimeControl(); を削除。
• 以下の関数を追加。

function promiseTwo() {
  return new Promise(resolve => {
    TextRandomAnimeControl();
    setTimeout(resolve, 1000);
  });
}

id=test

• 以下に変更。

function promiseThree() {
  return new Promise(resolve => {
    const ele = document.getElementById('test');
    ele.style.display = 'none';
    setTimeout(resolve, 1000);
  });
}

moji_move2.js

• load イベントリスナ登録のコードをまるごと削除。
• 以下の関数を追加。

function promiseFour() {
  return new Promise(resolve => {
    BlurTextAnimeControl();
    setTimeout(resolve, 1000);
  });
}

実行

すべての .js コードを読んだあとで、以下のコードを実行。

(async function() {
  await promiseOne();
  await promiseTwo();
  await promiseThree();
  await promiseFour();
})();

Comments

[samasa]

回答ありがとうございます。
試したところ問題が解決しました！
ベストアンサーに選ばせていただきました。