如果觸發器未點擊，在'x'秒後加載重疊

Question

我已經搜索周圍，但我很難找到答案。我對這一切還很陌生，並且自我教導。我有一些JavaScript加載點擊疊加，這會帶來一種形式。我也有一些JavaScript在10秒後加載頁面加載時的覆蓋。

我想要實現的是將它們鏈接在一起，所以如果沒有點擊觸發器，疊加加載10秒後。這是我點擊的代碼。

$(function() { 
    $('.cta').click(function(){ 
     $('.overlay').css('display','flex'); 
     return false; 
    }); 

    $('.close-btn').click(function(){ 
     $('.overlay').hide(); 
    });  
}); 

這是我的頁面加載代碼。

$(document).ready(function() { 
    // check cookie 
    var visited = $.cookie("visited") 

    // load overlay if they haven't visited 
    if (visited == null) { 
     setTimeout(function(){ 
      $('.overlay').css('display','flex');}, 10000); 
     }); 
     $.cookie('visited', 'yes'); 
    } 

    // set cookie 
    $.cookie('visited', 'yes', { expires: 1, path: '/' }); 
}); 

$('close-btn').click(function() { 
    $('.overlay').fadeOut(200, "linear"); 
}); 

我一直在單獨測試它們，沒有同時運行它們。

Answer 1

這就是你的代碼在我的評論中寫的clearTimeout()方法的樣子。

var myTimeout; 

$(document).ready(function() { 
    // set onClick handlers after the page is loaded. 
    $('.cta').click(function(){ 
     clearTimeout(myTimeout); 
     $('.overlay').css('display','flex'); 
     return false; 
    }); 

    // Probably choose one of those, you are currently using two 
    // onClick handlers for the close-btn apparently: 
    $('.close-btn').click(function(){ 
     $('.overlay').hide(); 
    }); 
    $('.close-btn').click(function() { 
     $('.overlay').fadeOut(200, "linear"); 
    }); 

    // check cookie 
    var visited = $.cookie("visited") 

    // load overlay if they haven't visited 
    if (visited == null) { 
     myTimeout = setTimeout(function(){ 
     $('.overlay').css('display','flex');}, 10000); 
     // }); <= Those were wrong here. 
     $.cookie('visited', 'yes'); 
    } 

    // set cookie 
    $.cookie('visited', 'yes', { expires: 1, path: '/' }); 
});