How to add delay in loop iteration

Question

Hope everyone is ok, i amy getting problem regarding to to add delay in loop iteration. my overall code is working very well just delay in loop iteration is not working. it change background images very quickly that look like change only one image. but i check in console images change but very quickly. so delay iteration is not work.

Here is my full code

var text = ["string1, string2"];
var backgroundImg=["image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg"];
var counter = 0;
var currentPos = 0;
var elem = document.getElementById("animated-text");
var elembg = document.getElementById("animated-background");
var inst = setInterval(change, 6000);
//var bginst = setInterval(changeImage, 2000);
console.log("changetextbefore");

function change() {
console.log("changetextbefore call function" + counter + currentPos);

    if (counter == 0 ) {
    console.log("counter == 0 " + counter + text[counter]);
        elem.innerHTML = text[counter];
        office1();  
    }   
    else  {
        elem.innerHTML = text[counter];
        console.log("counter == 1" + counter + text[counter]);
        office2();

    }

  counter++;
  
  if (counter >= text.length) {
  console.log("counter >= text.length");
    counter = 0;
    // clearInterval(inst); // uncomment this if you want to stop refreshing after one cycle
  }
}

function office1() {  
    console.log("changetextbefore call office 1");
    
    while (currentPos < 2) {
    console.log("currentPos < 2" + currentPos);
        setInterval(function(){elembg.style.backgroundImage = "url('"+backgroundImg[currentPos]+"')" }, 3000);
        console.log(backgroundImg[currentPos]);
        currentPos++;
    }   
    
}  

function office2() {
    console.log("changetextbefore call office 2");
    
    while (currentPos < 4) {
    console.log("currentPos < 4" + currentPos);
        setInterval(function(){elembg.style.backgroundImage = "url('"+backgroundImg[currentPos]+"')" }, 3000);
        console.log(backgroundImg[currentPos]);
        currentPos++;
    }
    
    if ( currentPos > 3) {
        console.log("changetextbefore call office 2 if condition");
        currentPos = 0;
    }
}  

and i need to add delay in this loop, which is not working. can anyone please help me

 while (currentPos < 2) {
    console.log("currentPos < 2" + currentPos);
        setInterval(function(){elembg.style.backgroundImage = "url('"+backgroundImg[currentPos]+"')" }, 3000);
        console.log(backgroundImg[currentPos]);
        currentPos++;
    }