2017-06-29 223 views
0

我試圖在按下按鈕後,按時間順序依次顯示一組div,並同時用網絡攝像頭拍照併發送它到服務器。我已經有了這個工作,但是當我雙擊鼠標時,該功能會觸發不止一次,導致div互相重疊。jQuery按順序顯示/隱藏div,並且不重疊

我正在使用jQuery在特定時間顯示和隱藏適當的div,我試過使用.one處理程序,但它似乎沒有工作?我不確定自己是否做錯了什麼,或者如果有更好的辦法可以做到這一點?

謝謝!

var stages = []; 
stages.push(document.getElementById('one')); 
stages.push(document.getElementById('two')); 
stages.push(document.getElementById('three')); 
stages.push(document.getElementById('four')); 

var currentStage = 0; 

stages[currentStage].style.display = 'block'; 

function clickHandler() { 
    setTimeout(showModal, 3000); 
} 


function showModal(){ 

    stages[currentStage].style.display = 'none'; 
     currentStage++; 

     if (currentStage >= 3) currentStage = 0; 

     stages[currentStage].style.display = 'block'; 

} 

$("#analyse").one("click", function() { 
    $("#one").fadeOut("fast", function() { 
      clickHandler(); 
      $("#two").fadeIn("slow", function() { 

       setTimeout(function(){$("#three").fadeIn()},6000); 
       setTimeout(function(){$("#three").fadeOut()}, 7000); 
       setTimeout(function(){$("#four").fadeIn()}, 7000); 

      }); 
    }); 
}); 

回答

0

您需要在第一次點擊後鎖定點擊以防止按鈕垃圾郵件。您可以用一個標記來實現此目的,並且只要輸入$("#analyse").one(),就放置一個if (flag == true)並立即將該標記轉換爲false

一旦完成所有工作,7秒鐘後,似乎將其更改爲true

編輯

var canClick = true; 

$("#analyse").one("click", function() { 
    // Check if can start executing 
    if (canClick) { 
     // Stop next executions 
     canClick = false; 

     // After 8 seconds, allow executing again 
     setTimeout(function() { 
      canClick = true; 
     }, 8000); 

     $("#one").fadeOut("fast", function() { 
      clickHandler(); 
     $("#two").fadeIn("slow", function() { 

      setTimeout(function(){$("#three").fadeIn()},6000); 
      setTimeout(function(){$("#three").fadeOut()}, 7000); 
      setTimeout(function(){$("#four").fadeIn()}, 7000); 
     }); 
    }); 
}); 
+0

道歉,我很新的JavaScript和jQuery。我將在哪裏將這個標誌放在我的代碼中? – Pete

+0

我編輯了回覆。像這樣的東西應該可以工作,你可以將我的8000毫秒變成任何你喜歡的東西。 – Ted

+0

還添加了對理解的註釋 – Ted

0

不是標誌,你也可以解除綁定的:

$( 「#分析」)解除綁定( '點擊');

但通常即使雙擊也只能調用一次函數。因此,我建議您嘗試之前:

$("#analyse").unbind('click'); 
$("#analyse").one("click", function() { 
    $("#one").fadeOut("fast", function() { 
      clickHandler(); 
      $("#two").fadeIn("slow", function() { 

       setTimeout(function(){$("#three").fadeIn()},6000); 
       setTimeout(function(){$("#three").fadeOut()}, 7000); 
       setTimeout(function(){$("#four").fadeIn()}, 7000); 

      }); 
    }); 
}); 

我認爲它可能是你雙擊綁定click事件,所以解除綁定前可以修復它。如果不是隻是將其添加到函數內部。

$("#analyse").one("click", function() { 
     $("#analyse").unbind('click'); 
     $("#one").fadeOut("fast", function() { 
       clickHandler(); 
       $("#two").fadeIn("slow", function() { 

        setTimeout(function(){$("#three").fadeIn()},6000); 
        setTimeout(function(){$("#three").fadeOut()}, 7000); 
        setTimeout(function(){$("#four").fadeIn()}, 7000); 

       }); 
     }); 
    }); 
+0

這似乎阻止了divs的重疊,但是當雙擊它似乎顯示一個接一個更快的div。有沒有一種方法可以觸發一次,因此fadeIn/fadeOut定時器完成剩下的工作? – Pete

+0

@Pete不理解你的問題,它和以前一樣快/慢。如果您想更改速度,請在淡入調用之後更改定時器(毫秒)。目前,#3秒會在6秒後消失,1秒後消失。 4秒鐘後也會消失。 – Doomenik