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: '/' });
});

如果未单击触发器，则在'x'秒后加载覆盖

1 个答案: