在'x'如果未单击触发器，则为秒

Load overlay after 'x' seconds if trigger not clicked

本文关键字：触发器 如果 单击      更新时间：2023-09-26

我四处寻找，但很难找到答案。我对这一切和自学都还很陌生。我有一些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");
});

我一直在分别测试它们，而不是同时运行它们。

这就是我在评论中写的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: '/' });
});
相关文章：