时间戳

首页 > 解决方案 > 全局变量不会改变

javascript - 全局变量不会改变

问题描述

我正在尝试设置一个计时器来关闭 html 页面上的模式。问题是我需要一个全局变量才能在函数中使用，并且我不能为这个变量重新赋值。

我在许多网站上寻找答案，但没有一个与我的代码一起使用。该值在声明时已正确设置，但稍后当我在函数中调用它时无法重新分配它（而不是简单地减少它的值）。

在浏览器的开发工具中未检测到错误。

var delayToCloseModal = 5;

function AnimateModal() {

    // Each time this function is called
    delayToCloseModal = 5; // HERE IS THE PROBLEM!!!
                           // delayToCloseModal is not set at 5 again


    // If the modal isn't oppened
    if (document.getElementById("modal").style.opacity < 0.01) {
        // Open Modal
    }


    // Check every second if the timer is done, else reduce it by 1
    var checkTimer = setInterval(CheckCounterDone, 1000);


    function CheckCounterDone() {
        if (delayToCloseModal > 0) {
            // Reduce timer
            delayToCloseModal--; // Strangely, this works really fine!
        }
        else {

            // Stop checking timer
            clearInterval(checkTimer);

            // Close Modal

        }
    }
}

“定时器”系统工作得非常好，模态框在打开后 5 秒自动关闭，但如果在模态框已经打开时再次调用该函数，它不会将打开定时器重置为 5。

标签： javascript

解决方案

我找到了解决问题的方法！（它可能是“自制的”，但它有效）

我创建了一个布尔变量来启用或禁用 setInterval 的创建（如果已在运行）。这是代码：

var delayToCloseModal = 5;
var timerRunning = false; // Set false as default value to allow the creation of the first timer

function AnimateModal() {

    // Each time this function is called
    delayToCloseModal = 5; 


    // If the modal isn't oppened
    if (document.getElementById("modal").style.opacity < 0.01) {
        // Open Modal
    }


    // Check if a timer is already running
    if (!timerRunning){
         var checkTimer = setInterval(CheckCounterDone, 1000); // Create new timer
         timerRunning = true; // Forbids to create another new timer
    }


    function CheckCounterDone() {
        if (delayToCloseModal > 0) {
            // Reduce timer
            delayToCloseModal--; 
        }
        else {

            // Stop checking timer
            clearInterval(checkTimer); // Delete the existing timer
            timerRunning = false; // Allow to recreate another timer

            // Close Modal

        }
    }
}

自上次调用该函数以来，模态现在保持打开 5 秒，并且计时器每秒仅减少一秒，即使您向该函数的调用发送垃圾邮件，并在延迟设置为 0 后成功关闭。

感谢任何回答您的帮助的人！:)

推荐阅读