2016-12-03 5 views
0

Deferredの使用を「パターン防止」(例:here)としてよく聞きました。 私は、遅延を使用することが理にかなっているシナリオがあるかどうかを理解しようとしています。私は単一のページのWebアプリケーションのページにrecaptchaを持っています。特定のアクションを実行するには、キャプチャテストをパスする必要があります。キャプチャはいつか終了するので、ユーザーはテストをやり直す必要があるかもしれません。しかし、キャプチャが期限切れになる前にユーザーがこれらのアクションの1つをトリガーする場合もありますので、テストをやり直すべきではありません。ここでいくつかの疑似コードを理解してください。これはDeferredの良いユースケースですか?

class App { 
    constructor() { 
    this.captchaPromise = new Deferred(); 
    } 

    maybeDoIt() { 
    this.captchaPromise.then(() => { 
     this._doIt(); 
    }) 
    } 

    _doIt() { 
    alert('done'); 
    } 

    _onCaptchaSuccess() { 
    this.captchaPromise.resolve(); 
    } 

    _onCaptchaExpire() { 
    this.captchaPromise.reject(); 
    this.captchaPromise = new Deferred(); 
    } 
} 

const app = new App(); 

window._captchaOnload = function() { 
    window.grecaptcha.render('js-captcha', { 
    'sitekey': 'dsadaablsabllbalblablalblablablalbalbalblablabla31', 
    'callback': app._onCaptchaSuccess.bind(app), 
    'expired-callback': app._onCaptchaExpire.bind(app) 
    }); 
}; 

これは、上記のシナリオを実装するための良い方法だと思いますか?

私は、es6モジュールのインポート構文をサポートし、少なくともIE9以上をサポートするバニラjs遅延実装またはライブラリを見つけるのにも苦労しています。IE8でもすばらしいでしょう(私はjQueryを使用できません)。どんな助けもありがとうございます。

更新:

は最終的に私はまったく約束を必要としないことを決めた、あなたの答えをありがとうございました。 recaptchaのレンダリングを約束することは良い考えでした。私は次のことを解決しました:

_doIt (data) { 
    if (!this._captchaSolved) { 
     this._dataToUseAfterCaptchaSuccess = data; 
     return; 
    } 
    this._dataToUseAfterCaptchaSuccess = null; 

    console.log('done', data); 
    } 

    _onCaptchaSuccess (captchaResponse) { 
    this._captchaSolved = true; 
    this._captchaResponse = captchaResponse; 

    if (this._dataToUseAfterCaptchaSuccess) { 
     this._doIt(this._dataToUseAfterCaptchaSuccess); 
    } 
    } 

    _onCaptchaExpire() { 
    this._captchaSolved = false; 
    } 

答えて

0

私が言うことができる限り、遅延は必要ありません。状態の指標として

  • :書かれたよう

    は、それがより簡単に達成することができ、どちらも二つのことを、ない「保留中」効果「期限が切れていない」を意味し、手段を「拒否」「期限切れ」。代わりに単純なブール値を使用できます。

  • _doIt()_onCaptchaSuccessハンドラから直接呼び出すことも、.renderの 'callback'ハンドラとして指定することもできます。

より現実的なアプローチは、次のように例えば、window.grecaptcha.render()をpromisifyすることです:

window._captchaOnload = function() { 
    new Promise(function(resolve, reject) { 
     window.grecaptcha.render('js-captcha', { 
      'sitekey': 'dsadaablsabllbalblablalblablablalbalbalblablabla31', 
      'callback': resolve, 
      'expired-callback': reject 
     }); 
    }) 
    .then(app._doIt.bind(app), app.expire.bind(app)); 
}; 

appはDeferredの作り方や約束を含まない、それに応じて書き込まれる必要があります。

+0

@ Roamer-1888ありがとうございます!私が使用したソリューションで質問を更新しました – kuus

関連する問題