[問題] document.ready不設置setTimeout跑不出來

[windmax1 (I do my best)]

概述一下目前遇到的問題

導覽列現在有四個連結，點選任一個連結後，用js+jquery抓出目前網址比對導覽列的連結
網址，相符則在該連結上追加 class="nowPage"，連結文字下方會出現藍色底線表示
正在瀏覽該頁面。

程式碼如下:
$(document).ready(function ()
{
    $(".navBar").load("./navBar.html");

    setTimeout(function () {
        $('nav ul li a').each(function (index) {
            $(this).on('click', addClassNowPage(this));
        }); }, 2);
});

因為用debugger去跑功能都正常，猜是因為網頁讀取速度差異造成現在的問題
才嘗試用setTimeout，想不到還真的可以，但Delay時間一定要設2毫秒以上XD

想請教有人了解這是什麼原因嗎??
順便請教不使用前端框架React/Angular/Vue的情況下，有更好的方法去達到小弟要的
當前頁面畫底線功能嗎

--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 61.222.241.251
※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1542711812.A.C1F.html
推 pkro12345: load可以塞callback function 這樣會等你load好才執行
→ pkro12345: 另外不太清楚比對的意義 可以點選一個連結 把全部連結
→ pkro12345: 的nowpage class清除 再將點選的添加class就好
推 moodoa3583: 同上，這應該不用比對網址
→ moodoa3583: $（“.nav").click(
→ moodoa3583: function(){
→ moodoa3583: $(".nav").removeClass("thispage");
→ moodoa3583: $(this).addClass("thispage");
→ moodoa3583: }
→ moodoa3583: 概念應該是這樣就好
→ moodoa3583: 更正：thispage—>nowpage
→ windmax1: 了解!!感謝樓上兩位大大的意見
推 a700evolve: load檔案是需要下載時間的，馬上綁click事件自然會找
→ a700evolve: 不到對象。
→ a700evolve: load方法只適合在local測試時偷懶用
→ a700evolve: 正式環境請用pug編譯或套框架
→ windmax1: 原來如此 感謝提供知識