일시 중지를 클릭하여 일시적으로 클릭을 중지합니다.

Question

저는 직접 전달할 수없는 내 여자 친구의 선물을 보여주기 위해 빠른 스크립트를 만들고 있습니다. 클릭 사이에 일시 중지를 추가하여 우연히 모든 사례를 실수로 처리 할 수 ​​없습니다.

var gifty = document.getElementById("gift"); 
var counter = 4; 

var handler = function() { 
    gifty.style.backgroundPosition = counter * 722 + "px " + "0px"; 
    counter -= 1; 
    switch (counter) { 
    case 3: 
     document.getElementById("head2").innerHTML = "Click it again! Click it again!"; 
     break; 
    case 2: 
     document.getElementById("head2").innerHTML = "Hmmm, what could it be?"; 
     break; 
    case 1: 
     document.getElementById("head2").innerHTML = "Any ideas what it could be?"; 
     break; 
    case 0: 
     document.getElementById("head2").innerHTML = "Surprise! Your new sewing mahcine is waiting for you in Doha! Hope you like it. xxxxx"; 
     gifty.removeEventListener("click", handler); 
     break; 
    } 
} 

gifty.addEventListener("click", handler); 

Answer 1

당신은 클릭 처리기를 전환하기 위해 setTimeout를 사용할 수 있습니다

const PAUSE_DURATION = 2000 // 2 seconds 
 

 
const gifty = document.getElementById('gift') 
 
const header = document.getElementById('head2') 
 
const setText = text => header.innerHTML = text 
 

 
let counter = 4 
 

 
const handler =() => {   
 
    counter -= 1 
 
    
 
    switch (counter) { 
 
    case 3: setText('Click it again! Click it again! '); break 
 
    case 2: setText('Hmmm, what could it be? '); break 
 
    case 1: setText('Any ideas what it could be? '); break 
 
    case 0: setText('Surprise! Your new sewing machine is waiting for you in Doha! Hope you like it. '); break 
 
    } 
 
    
 
    removeClickHandler() 
 
    
 
    setTimeout(() => addClickHandler(), PAUSE_DURATION) 
 
} 
 

 
const addClickHandler =() => gifty.addEventListener('click', handler) 
 
const removeClickHandler =() => gifty.removeEventListener('click', handler) 
 

 
addClickHandler()

<div id="gift"> 
 
    <h2 id="head2"> Click here! ❤️ </h2> 
 
</div>

Answer 2

var initialTime = new Date().getTime(); 

var handler = function() { 
    var clickTime = newDate().getTime(); 
    if (clickTime - initialTime > 1000) { // 1 second 

     (... do your stuff here ...) 

     initialTime = new Date().getTime(); 
    } 
}