How To Set Same SetTimeOut Value For Multiple Functions Inside The EventListener

user_14835148 0
Viewed 25

I am working on my portfolio and for that I want to apply delay on my link for which i am using setTimeOut function but the problem is when I am trying to wrap the EventListener in a function and call this setTimeOut function whether inside or outside it is not working.

Please go through the code for better understanding of my problem.

//------ NOT WORKING (Outside EventListener) ------//

function firstLink(){
  HomePageH.addEventListener('click', ()=> {
    window.location.href = '../index.html';
  })
}

function secondLink(){
  AboutMeH.addEventListener('click', ()=> {
    window.location.href = rootURL + '#about-me';
  })
}

function thirdLink(){
  WorksIDoH.addEventListener('click', ()=> {
    window.location.href = rootURL + '#work-i-do';
  })
}

setTimeout(() => {
  firstLink();
  secondLink();
  thirdLink();
}, waitTime);



//------ NOT WORKING (Inside EventListener) ------//

HomePageH.addEventListener('click', ()=> {
  function firstLink(){
    window.location.href = '../index.html';
  }
})

AboutMeH.addEventListener('click', ()=> {
  function secondLink(){
    window.location.href = rootURL + '#about-me';
  }
})

WorksIDoH.addEventListener('click', ()=> {
  function thirdLink(){
    window.location.href = rootURL + '#work-i-do';
  }
})

setTimeout(() => {
  firstLink();
  secondLink();
  thirdLink();
}, waitTime);



//------ WORKING CODE (But have to apply timeout again and again) ------//

HomePageH.addEventListener('click', ()=> {
  setTimeout(() => {
    window.location.href = '../index.html';
  }, waitTime);
});   

AboutMeH.addEventListener('click', ()=> {
  setTimeout(() => {
    window.location.href = rootURL + '#about-me';
  }, waitTime);
});

WorksIDoH.addEventListener('click', ()=> {
  setTimeout(() => {
    window.location.href = rootURL + '#work-i-do';
  }, waitTime);
});

javascript
2 Answers

var hibtn=document.getElementById("hi")
var hellobtn=document.getElementById("hello")

function sethi(){
    hibtn.addEventListener("click",()=>{
        location.href="hi.html"
    })
}

function sethello(){
    hellobtn.addEventListener("click",()=>{
        location.href="hello.html"
    })
}

setTimeout(() => {
    alert("done")
    sethi()
    sethello()
}, 3000);
<!DOCTYPE html>
<html lang="en">

<body>
    <button id="hello">hello</button>
    <button id="hi">Hi</button>
    <script src="./index.js"></script>
    
</body>
</html>
if I am not wrong, you want to assign functions to buttons after a certain period of time.The above code works for me.

user_143537440

Instead of using separate event listeners you can consolidate your logic into one function that adapts for the clicked element. I recommend something like the following snippet (note the use of data-route attributes in the HTML).

const rootURL = '/'
const waitTime = 5000
const delayedLink = link => {
  let path = '#default'
  switch (link.dataset.route) {
    case 'home':
      path = '../index.html'
      break
    case 'about':
      path = rootURL + '#about-me'
      break
    case 'work':
      path = rootURL + '#work-i-do'
      break
  }
  console.log(`routing to ${path} in ${waitTime}ms .....`)
  setTimeout(() => {
    //alert(path)
    window.location.href = path
  }, waitTime)
}
document.querySelectorAll('.delayed-js-link').forEach(item => {
  item.addEventListener('click', () => {
    console.log(`clicked ${item.dataset.route}`)
    delayedLink(item)
  })
})
.delayed-js-link {
  cursor: pointer;
  margin: 0.2em;
  padding: 0.5em;
  background-color: green;
  color: white;
  text-align: center;
}

.delayed-js-link:hover {
  background-color: #050;
}
<div class="delayed-js-link" data-route="home">Home</div>
<div class="delayed-js-link" data-route="about">About</div>
<div class="delayed-js-link" data-route="work">Work</div>

user_61273930
Related