let p = Promise.resolve();
        p.then(() => highlight(2))
          .then(() => delay(duration))
          .then(() => getPath(num))
          .then(() => {
            let pj = Promise.resolve();
            for (let j = 0; j < searchPath.length; j++) {
              pj = pj
                .then(() => delay(duration))
                .then(() => changeColor(searchPath[j], "red"))
                .then(() => {
                let promiseCode = Promise.resolve();
                  if (num < searchPath[j]) {
                    promiseCode = promiseCode
                      .then(() => {
                        $("#BSTree_prev")
                          .find("#" + searchPath[j] + "_text")
                          .text("Go Left");
                      })
                      .then(() => highlight(7))
                  } else {
                    promiseCode = promiseCode
                      .then(() => {
                        $("#BSTree_prev")
                          .find("#" + searchPath[j] + "_text")
                          .text("Go Right");
                      })
                      .then(() => highlight(12))
                  }
                });
            }
          })
          .then(() => delay(duration));

In the above code, i want pj to resolve in then first and then p's then (delay) should execute, what happening is p's then (delay) start executing before pj is resolved and then sometime later pj gets resolved. What am i doing wrong here?