脚本不会运行，但会在控制台中运行

Posted 2023-05-09

【中文标题】脚本不会运行，但会在控制台中运行

【英文标题】：Script won't run but will in console

【发布时间】：2016-04-04 19:17:57

【问题描述】：

我遇到了一个非常烦人的问题，从昨天开始就一直困扰着我。

当用户仍在同一个会话中时，我有一个脚本可以通过添加一个包含“display:none”的类来隐藏我的“intro”。然而，每当我刷新页面时，我的 else if 都不起作用。但是，复制我的代码并将其粘贴到控制台中确实有效。

jQuery(function($)  // this does the trick and also makes sure jQuery is not conflicting with another library
        if (!window.sessionStorage.gateIntro) 
            $('.intro-wrapper').addClass('intro-wrapper--show');
            $(document).on('click', '.intro-button', function()
                jQuery('.intro-wrapper').addClass('intro-wrapper--hide');
                sessionStorage.gateIntro = 1;
                setTimeout(function() 
                    $('.container').fadeIn('slow');
                , 1000);
            );

        // INTRO TIMER
        setInterval(function()

            var random = Math.floor(Math.random() * 90 + 10);
            var random2 = Math.floor(Math.random() * 90 + 10);
            var random3 = Math.floor(Math.random() * 90 + 10);

            var number = "<p class='number'>" + random + " </p>";
            var number2 = "<p class='number'>" + random2 + " </p>";
            var number3 = "<p class='number'>" + random3 + "</p>";

            $('.intro-timer').empty().append(number, number2, number3);

        , 100);
    

    else if (window.sessionStorage.gateIntro) 

        console.log('there is a session key!');

        $('.intro-wrapper').addClass('intro-wrapper--hidden');

        $('.container').fadeIn('slow');


    
);

要记住的几件事；

我使用 wordpress 和 angular，wordpress 就像我的 API 来获取 JSON 我确保我的 script.js 在我的 html 中的其余 js 之后加载 运行此脚本通常会在控制台日志中显示“有一个会话密钥！” 只有 .addClass() 和 .fadeIn() 不起作用！ .intro-wrapper--hide 将我的 div 150 视口高度动画到顶部，.intro-wrapper-hidden 将其设置为不显示

** 编辑 **

我的问题被否决了，因为有人认为它与另一个关于会话存储不起作用的问题 (sessionStorage isn't working as expected) 重复，但它与会话存储无关，它不运行我的 addClass() 和fadeIn()。

如果有人能帮我解决问题，我会很好:)

提前致谢！

【问题讨论】：

编辑：可能无法正常工作，因为当您尝试 addClass() 和 fadeOut() 时 DOM 尚未准备好 - 我建议您改为创建一个命名函数并触发一次 @987654328 @

啊哈，我猜是这样，但是如果没有会话密钥，它怎么会运行“if”，如果有，它会运行我的 if else 但它不会添加上课也不淡入..？

仔细审查后编辑的评论 - 试试吧

好的，谢谢，会试试！

sessionStorage isn't working as expected的可能重复

【参考方案1】：

您的问题很可能是您在文档完全准备好之前尝试访问 DOM。这些线的宽度：

$('.intro-wrapper').addClass('intro-wrapper--hidden');
$('.container').fadeIn('slow');

我建议命名你的函数并在完成后调用它。

// Call Your Function once the DOM is ready
$( document ).ready( function()  setupIntro();  );

// Name Your Function
function setupIntro() 
    if (!window.sessionStorage.gateIntro) 
        $('.intro-wrapper').addClass('intro-wrapper--show');
        $(document).on('click', '.intro-button', function()
            jQuery('.intro-wrapper').addClass('intro-wrapper--hide');
            sessionStorage.gateIntro = 1;
            setTimeout(function() 
                $('.container').fadeIn('slow');
            , 1000);
        );

        // INTRO TIMER
        setInterval(function()
            var random = Math.floor(Math.random() * 90 + 10);
            var random2 = Math.floor(Math.random() * 90 + 10);
            var random3 = Math.floor(Math.random() * 90 + 10);

            var number = "<p class='number'>" + random + " </p>";
            var number2 = "<p class='number'>" + random2 + " </p>";
            var number3 = "<p class='number'>" + random3 + "</p>";

            $('.intro-timer').empty().append(number, number2, number3);

        , 100);
    
    else if (window.sessionStorage.gateIntro) 
    
        $('.intro-wrapper').addClass('intro-wrapper--hidden');
        $('.container').fadeIn('slow');
    

这将确保您不会尝试在 DOM 元素存在之前对其进行访问。

【讨论】：

它确实运行了我的脚本，但它仍然执行相同的操作。此外，当我单击按钮时，它不会创建会话密钥

让我们拭目以待。

当然，谢谢。因为它没有得到'$'，所以我用'jQuery'代替。现在它仍然做同样的事情（虽然它确实创建了一个会话密钥）。

如果您在使用 $ 时遇到问题，请查看 jQuery.noConflict()

我知道，这是它没有创建我的会话密钥的原因，现在它可以了！