promise 内での setTimeout について

前提・実現したいこと

firebase を使用して簡単なアプリを作成しています。
ユーザーの退会処理完了時に、
「ご利用ありがとうございました。10秒後にHPに移動します」
というメッセージを出して、10秒後にHPに遷移させるように試みています。
10秒後の遷移については、setTimeoutを使用して実現しようとしています。

発生している問題・エラーメッセージ

promise 内で setTimeout を使っているがうまく動作しない（即時実行される）。

該当のソースコード

js
1...
2    to_landingPage() {
3      self.$router.push("/landing_page");
4    },
5    withdrawal() {
6      const self = this;
7      self.is_loading = true;
8      let user = firebase.auth().currentUser;
9
10      user
11        .delete()
12        .then(function() {
13          // 削除した旨伝えてリダイレクトさせる
14          self.is_loading = false;
15          self.is_withdrawal = true;
16        })
17        .then(function() {
18          setTimeout(self.to_landingPage, 10000);
19        })
20        .catch(function(e) {
21          // エラーを伝える
22          console.log(e.message);
23          self.is_loading = false;
24          self.is_withdrawal = false;
25        });
26...

試したこと

.then(function() {
   setTimeout(self.to_landingPage, 10000);
})

の箇所をいろいろ書き直してみました。

// 即時実行
.then(
  setTimeout(self.to_landingPage, 10000);
)
// 即時実行
.then(
  setTimeout(function(){self.to_landingPage}, 10000);
)

ご存知の方がいらっしゃいましたら、教えていただけると幸いです！

R.Mizukami

2020/05/07 11:49

どこから 10 秒後にどの処理を実行したいのでしょうか。現在のコードでも、delete() 完了から 10 秒後に to_landingPage() が実行されますよね？ // 削除した旨伝えて…… の部分実行後 10 秒後ということなら、原因はおそらくこのコメントで省略された部分にあるので、そちらのコードを提示いただくといいと思います。

u.sayaka0112

2020/05/07 11:56

>現在のコードでも、delete() 完了から 10 秒後に to_landingPage() が実行されますよね？これがされないんです。。 > // 削除した旨伝えて…… ここには何も書いていません。紛らわしくてすみません。。withdrawal = true にすることで、メッセージを表示するようにしています。

ku__ra__ge

2020/05/07 13:01

this.$router じゃなく self.$router になってるのが気になるんですが、単純にto_landingPageを呼び出すことで間違いなくページ遷移できますか？

u.sayaka0112

2020/05/07 13:07 編集

const self = this; で代入しているので大丈夫だと思います。遷移自体は問題なくできています。

u.sayaka0112

2020/05/18 07:47

to_landingPage() { self.$router.push("/landing_page"); }, ここで const self = this; が抜けてました...

行動規範の内容に同意します

回答3件

ベストアンサー

以下コードでは10秒後にto_landingPageメソッドが正しく呼び出されます。
問題は提示されたコード部分以外にあるのではないでしょうか？

javascript
1let hogeObj = {
2  to_landingPage() {
3    console.log("to_landingPage called.");
4  },
5  withdrawal() {
6    const self = this;
7    
8    let user = { // dummy object
9      delete(){
10        console.log("user.delete called.");
11        return Promise.resolve();
12      }
13    };
14    
15    user
16      .delete()
17      .then(function() {
18        // 削除した旨伝えてリダイレクトさせる
19        self.is_loading = false;
20        self.is_withdrawal = true;
21      })
22      .then(function() {
23        setTimeout(self.to_landingPage, 10000);
24      })
25      .catch(function(e) {
26        // エラーを伝える
27        console.log(e.message);
28        self.is_loading = false;
29        self.is_withdrawal = false;
30      });
31  }
32};
33
34hogeObj.withdrawal();