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

実現したいこと

下記のように順番に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 => { })