jQuery每秒检测Cookie失效排查：图片按钮显示控制异常问题

你的定时检测Cookie逻辑没正常运行，我帮你梳理下代码里的几个关键问题，以及对应的修复方案：

核心问题梳理 #

• 重复引入jQuery导致插件失效：页面先引入了jquery-2.1.0.min.js，后面又重复引入jquery-2.1.3.min.js，后者会覆盖前者的jQuery实例，导致依赖第一个jQuery的jquery.cookie.js插件无法正常工作。
• 选择器语法错误：定时器里的$("changeVisible")是错误写法，你要选中的是带changeVisible类的元素，应该用类选择器$(".changeVisible")。
• 冗余的插件式写法：把检测逻辑封装成jQuery插件完全没必要，反而增加了DOM绑定的冗余，直接写独立函数更简洁。
• 缺少定时器停止逻辑：检测到Cookie后没有停止定时器，会一直做无效循环。

修正后的完整代码 #

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DataPull.aspx.cs" Inherits="DataPullForDemandPlanning.DataPull" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Data Pull For Demanding Planning</title>
    <style>
        .changeVisible{
            display: inherit;
        }
    </style>
    <!-- 只保留一个jQuery引入，确保cookie插件能正确挂载 -->
    <script type="text/javascript" src="Scripts/jquery-2.1.0.min.js"></script>
    <script type="text/javascript" src="Scripts/jquery.cookie.js"></script>
    <script type="text/javascript">
        function changeVisibility(stat) {
            var element = document.getElementById('ibtnPullData');
            if (stat == 'none')
                element.style.display = 'none';
            else
                element.style.display = 'inherit';
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <table style="width: 100%">
            <tr>
                <td align="center" style="border-bottom-color: #990000; height: 30px; border-bottom-style: solid" valign="top">
                    <h2>Data Pull For Demand Planning</h2>
                </td>
            </tr>
            <tr>
                <td align="right">
                    Logged in as:
                    <asp:Label ID="lblUser" runat="server" Visible="true"></asp:Label>
                </td>
            </tr>
        </table>
        <table style="width: 60%">
            <tr>
                <td style="width: 40px">
                    <asp:ImageButton ID="ibtnPullData" runat="server" CssClass="changeVisible" ImageUrl="~/Images/ExcelLogo.gif" 
                        OnClick="ibtnPullData_Click" OnClientClick="changeVisibility('none');" />
                </td>
                <td style="width: auto">
                    Click Here to start data pull. The process may take up to 1 minute.
                </td>
            </tr>
        </table>
    </form>
    <script>
        $(document).ready(function () {
            // 初始化清除Cookie，确保路径一致
            $.removeCookie('downloaded', { path: '/' });
            
            // 定义独立的Cookie检测函数
            function checkDownloadCookie() {
                var value = $.cookie('downloaded');
                if (value === 'true') {
                    changeVisibility('inherit');
                    $.removeCookie('downloaded', { path: '/' });
                    // 检测到Cookie后停止定时器，避免无效循环
                    clearInterval(intervalId);
                }
            }
            
            // 启动定时器并保存ID，用于后续停止
            var intervalId = window.setInterval(checkDownloadCookie, 1000);
        });
    </script>
</body>
</html>

关键修改说明 #

1. 移除重复jQuery引入：只保留最早的jquery-2.1.0.min.js，确保jquery.cookie.js能挂载到正确的jQuery实例上，保证$.cookie()方法可用。
2. 简化检测逻辑：把插件式的timer方法改成独立函数checkDownloadCookie，直接在定时器中调用，避免冗余的DOM操作和选择器错误。
3. 添加定时器停止逻辑：检测到目标Cookie并恢复按钮显示后，用clearInterval停止定时器，减少不必要的性能消耗。
4. 简化OnClientClick：去掉多余的javascript:前缀，OnClientClick本身就是执行JS代码的上下文，不需要额外声明。

另外要注意：确保你的ASHX文件设置Cookie时，**路径（Path）**和前端删除时的{ path: '/' }保持一致，否则前端可能无法读取到后端设置的Cookie。

内容的提问来源于stack exchange，提问作者joseph.c