ある要件があり、スクロールホイールが適切な位置に達したときに現在のアニメーションを実行する必要があります。このアニメーションはfooterの中にあり、ウェブページの本体はajaxを使ってレンダリングされています。私は js の中で ajax を呼び出してデータをレンダリングし、その後本体の高さを取得し、その高さまでスクロールしたときにアニメーションを実行します。
ローカルでテストしたところ、特に問題はなく、必要な効果はすべて得られました。しかし、サーバー上でテストすると、どのように書いても、まず本体の高さを取得し、その後データのレンダリングが行われることがわかりました。したがって、高さは非常に小さな値になり、私が望む属性には合致しません。
私は大まかに二つの解決策を考えましたが、どちらも失敗に終わりました。ローカルでは ajax が先に実行され、サーバーでは js が先に実行されました。
- 高さを取得するイベントの時間を 500ms 遅延させると、最終的にイベントを取得できなくなりました；
- このイベントを ajax の success コールバックの中に書くと、結果的にウェブページを初めて開いたときだけ成功し、その後は何度リフレッシュしても無効になり、イベントがブロックされてしまったため、方法二も廃止されました；
最後に思いついたのは、ajax は非同期の方法ではないかということです。これを同期に変更すれば、ajax が完了してから js イベントを実行すればよいのです。
async: false,
私は ajax の中にasyncというメソッドを書き、falseはデフォルトで同期的にデータを取得することを意味します。うまくいきました。サーバーに戻り、コンソールを開くと、データが先にレンダリングされ、その後本体の高さが取得されていることがわかりました。問題は解決しました。
もちろん、こうすることには欠点があります。もしインターフェースに問題があれば、ajax のレンダリングが失敗し、ウェブページ全体の js が実行できなくなります。しかし、データがレンダリングできないような状況に至った場合、ウェブページにアクセスする意味はなくなると思いますので、最終的にこの方法を採用しました。