URLを書き換えさせるとチカチカする

Question

[√] カーソルがちらつく

やりたいこと
ページ内リンクをクリックしたときに，URLに「#s0」が付くのを消す．
(index.html#s0 → index.html という想定)

<a href="#s0" onclick="
setInterval( function(){
window.history.replaceState('','','index.html')
}, 1000);
">押しほしい</a>

単にonclick="window.history.replaceState('','','index.html');"と書くだけでは，URL書き換え結果が持続しないので，setIntervalで対応したところ，マウスカーソルがちらついてしまいます．

状況としては**cly7796.netさんのDEMOと同じ状況になっています．しかし，単に「history.replaceState('','','URL1');」と書くだけ，と言っているkipureさんのDEMO**はちらつきが発生していません．

両者の違いと言えば，VanillaJSかjQueryかぐらいでしょうか？
jQueryで出来るなら，多少コードが長くなったとしてもVanillaJSでも出来るはずだと思うのですが...

##現状
こうなってました（setInterval無し版）

画面左中央のボタンが本件の<a>です。
ボタンを押した瞬間とhistory.replaceState終了後にそれぞれ現在のURLをalertで出力させています。
1回目のalertで、#付きのURLが表示され、2回目のalertで、#無しのURLが表示されますが、alertを閉じると（処理が終わると）URLが戻ってしまいます。

そして、morisobaさんの提案通りsetTimeoutを指定したものが**こちら**です。
見事にうまくいきました！

###ということで
そもそも何故、history.replaceStateを単体で書くと処理が持続しないのか、**kipureさんのDEMO**はhistory.replaceStateを単体で書いていました。
jQueryを使っていると、勝手にsetTimeoutが設定されるのでしょうか？

kipreさんのソース

あと、いちいちfunction(){}と書かなければならないのはなぜでしょうか

この辺りについて教えてもらえるとうれしいです。

Answer 1

setInterval で1秒おきに実行しているからちらつくのでは？
ちらつくかどうかはお使いのブラウザにも依ると思いますが。

とりあえずの対処法

実行するのは一度でいいので、setTimeout にします。
待つのは0秒にします。

<a href="#s0" onclick="
setTimeout( function(){
window.history.replaceState('','','index.html')
}, 0);
">押し<strong>て</strong>ほしい</a>

本質的な対処

ページ内のスクロール制御をしたい、かつ URL は弄りたくないのであれば、window.scrollToを使いましょう。
そうすれば <a> タグ使わないでいいですね。

Comments

[-1an.vvks-]

setTimeoutというのがあるのですね。家に帰ったら試してみます。
ちなみに、aタグを使っている件ですが、他のページのリンクから任意のウインドウへ直接飛べるようにしているので、今はとりあえずaタグはそのままにしておこうと思います。
ウィンドウという言い方をしましたが、細かい部分が伝わりづらいと思うので、作りかけのやつですが、これも家に帰ってから、サーバーへアップロードしてリンクを張ろうと思います。

Answer 2

追記分に関する回答です。

なぜ setInterval や setTimeout を使わないと URL 欄が変化しないか、ブラウザが行っているその背後の仕組を説明します。

<a href="#s0" onclick="
window.history.replaceState('','','index.html')
">押してほしい</a>

ここで”押してほしい”をクリックすると何がおこるかというと、

1. クリックされたので、onclickを実行する
2. javascript が URL 欄を書き換える
3. <a> によるページ遷移が発生する
4. ブラウザが URL に "#s0" を付け加える

以上となり、js が先に走ってしまうので結果的に URL 欄は質問者さんの意図と異なる結果となります。

ここで処理の順番をかえるために、タイマーを利用しています。これはブラウザの処理順を入れ替えるためにちょくちょく使うテクニックです。

<a href="#s0" onclick="
setTimeout( function(){
window.history.replaceState('','','index.html')
}, 0);
">押してほしい</a>

このときの処理順はこうなります。

1. クリックされたので、onclickを実行する
2. setTimeout なので、即時実行せずに、次のイベントキューに中身を積んでおく
3. <a> によるページ遷移が発生する
4. ブラウザが URL に "#s0" を付け加える
5. ブラウザは即時実行する処理が終わったので、イベントキューの中を見に行く
6. replaceState が発動して URL を書き換える

仕組みとしては以上です。

あと、これは蛇足なのですが、 URL のハッシュをわざわざ取り除く意図がよくわかりません。
このような標準的な挙動はそのままにして置くほうが概ね良い結果になります。

別のページからそのアンカーを参照しているのであれば、そのまま表示しておいていいんじゃないですかねぇ……。
アクセサビリティにも影響しそうですし。

Comments

[-1an.vvks-]

なるほどお！
alertだけ見てるとうまくいってそうに見えたのですが、実際には少しタイミングが違かったのですね。

アクセシビリティに影響しそうとのことなので、今回は実装を外そうと思いますが、メモ帳にコピペしてとっておくことにします。

ありがとうございました！

Answer 3

両者の違いと言えば，VanillaJSかjQueryかぐらいでしょうか？

いや、setIntervalを使ってることが違うと思いますが……
1秒ごとにURLを更新する必要はないように感じますが、その辺の処理はどうしても必要なんですか？

Comments

[-1an.vvks-]

setIntervalは確かにそうですね。ただ質問本文にも書きましたが、自分のサイトだとsetIntervalなしでは、history.replaceStateの効果が持続しないようです。
実物を見せたほうが現状がわかりやすいと思うので、家に帰ってからソースをアップするつもりです。

Answer 4

そのファイル自体のAタグは何の目的に使用するのですか？
ただ単にonClickイベントを取るだけならhref="javascript:void(0)"でいけますよ

Comments

[-1an.vvks-]

#s0:target{
/*css*/
}
としているので、href=#s0と記述しています。

[-1an.vvks-]

#s0がターゲットされた際に、間接セレクタを使って、他の要素のスタイルも変えるのですが、ページ遷移はしていないので、#s0を消したい、ということです。