一系列图像按钮未及时加载，如果快速单击会导致问题 Asp.Net/VB.Net

Question

我之前针对不同的问题发布了类似的代码部分，现已修复，但是我现在有另一个非常烦人的问题：该代码适用于用户打开盒子的交易或无交易风格的游戏。以下代码位于更新面板中，显然可以处理 22 个框，但任何人都可以解释一下..

如果您超快地单击图像按钮/框，您会得到一些不会将图像更新为“openBox”图像的图像，而有些似乎已设置

session("BoxValue1")=0

在加载之前尝试执行以下操作：

btnBox2.imageUrl="~/files/images/icons/boxes/MONMOpenBox0.png"

不存在。

如果您清除设备上的图像缓存，似乎会发生这种情况，这就是为什么我认为图像加载速度不够快。有人可以提出解决方案吗？

<asp:ImageButton ID="btnBox1" visible="false" cssclass="playboxsize" commandArgument="1" ImageUrl="~/files/images/icons/boxes/MONMClosedBox1.png" runat="server" onClick="btnBoxSelected_Click" />
<asp:ImageButton ID="btnBox2" visible="false" cssclass="playboxsize" commandArgument="2" ImageUrl="~/files/images/icons/boxes/MONMClosedBox2.png" runat="server" onClick="btnBoxSelected_Click" /> 
<asp:ImageButton ID="btnBox3" visible="false" cssclass="playboxsize" commandArgument="3" ImageUrl="~/files/images/icons/boxes/MONMClosedBox3.png" runat="server" onClick="btnBoxSelected_Click" />

VB.Net

Protected Sub btnBoxSelected_Click(sender As Object, e As System.EventArgs)
           
    Dim btn As ImageButton = CType(sender, ImageButton)
    Dim boxNo As Integer = btn.CommandArgument

    If session("round")="chooseBoxes" Then
        Select Case boxNo
            Case"1"
                btnBox1.imageUrl="~/files/images/icons/boxes/MONMOpenBox" & session("BoxValue1") & ".png"      
                btnBox1.enabled="false"
                session("ValueOpened")=session("BoxValue1")
                session("BoxValue1")=0
            Case"2"
                btnBox2.imageUrl="~/files/images/icons/boxes/MONMOpenBox" & session("BoxValue2") & ".png"
                btnBox2.enabled="false"
                session("ValueOpened")=session("BoxValue2")
                session("BoxValue2")=0
            Case"3"
                btnBox3.imageUrl="~/files/images/icons/boxes/MONMOpenBox" & session("BoxValue3") & ".png"
                btnBox3.enabled="false"
                session("ValueOpened")=session("BoxValue3")
                session("BoxValue3")=0
        End Select
    End If
End Sub

Answer 1

与任何网页一样，如果您单击按钮（即使没有更新面板），则当前的回发周期将停止，并开始新的回发。

使用更新面板时也是如此。换句话说，如果您单击一个按钮，回发周期就会开始（正如我所说，即使使用更新面板，也会发生页面回发，但它称为“部分页面回发”）。在该部分页面回发中，我们仍然会发生回发，并且页面加载事件仍然首先触发，然后您的按钮代码存根触发。

因此，在任何一种情况下（无论是否有更新面板），如果用户在等待该往返过程中再次单击按钮，则当前页面生命周期将停止，并且新页面回发将开始。这可以停止并阻止现有代码完成。

换句话说，如果在当前回发完成之前单击按钮，则当前回发将终止，并开始新的往返和页面循环。

几乎在所有情况下，在使用网站时，用户通常可以再次单击另一个按钮，甚至同一按钮两次。在大多数情况下，这种情况不会经常发生，但仍然是一个问题。

为了防止按钮被单击两次，我通常会添加一个客户端 JavaScript 函数来隐藏按钮。

事实上，我经常会使用一些客户端 JavaScript 来隐藏页面的“部分”，因为这样会给用户留下网站响应速度比实际速度快得多的印象。

因此产生了这样的效果：

在上面，我使用了网络限制，因为我想看看该页面如何在互联网连接速度较慢的情况下工作。但是，请注意，当您单击按钮时，我实际上隐藏了页面的整个“div”区域（而不仅仅是您单击的按钮）。这意味着用户不能单击按钮两次，但更重要的是页面似乎通过隐藏部分页面的客户端单击事件立即响应用户。因此，应用程序“看起来”运行和响应速度更快，而且好处是用户无法单击按钮两次。

因此，一种简单的方法是添加一个隐藏按钮的客户端事件。当页面生命周期（所谓的回发和往返发生）时，当然会再次从服务器发送标记，并且按钮将重新显示。

因此您可以将其添加到您的图像按钮中：

jQuery：

                <asp:ImageButton ID="ImageButton1" runat="server" ClientIDMode="Static"
                    ImageUrl="~/Content/Balls/b0.png"
                    CssClass="myball"
                    OnClick="ImageButton1_Click"
                    OnClientClick="$(this).hide()"                        
                    />

使用纯 JavaScript，那么：

                <asp:ImageButton ID="ImageButton1" runat="server" ClientIDMode="Static"
                    ImageUrl="~/Content/Balls/b0.png"
                    CssClass="myball"
                    OnClick="ImageButton1_Click"
                    OnClientClick="myhide('ImageButton1')"                        
                    />


        <script>

            function myhide(btn) {
                document.getElementById(btn).style.display = "none"
                
            }

        </script>

使用更新面板时需要谨慎并进行测试，因为您在同一台计算机上运行浏览器和 Web 服务器。我无法强调这个问题变得多么重要。开发过程中的结果是网络连接位于一台计算机上。在生产中，网站在服务器上运行，并且浏览器和该网络服务器之间有互联网连接，因此运行速度会慢得多。速度太慢了，在某些情况下我不得不放弃使用更新面板。

解决方案是开始编写 JavaScript 以在客户端浏览器中运行。事实上，对于更新诸如图形和高度交互类型的网页之类的内容，更新面板通常速度不够。

因此，在测试过程中，养成按f12（浏览器调试工具）的习惯，并将网络节流设置为快速3g。然后，这将使您了解该网站将如何“真正”响应那些网络连接不太理想的用户。

.

因此，当浏览器在按 f5 运行应用程序后启动时，按 f12，然后在网络选项卡上选择此设置：

因此，请记住，虽然更新面板看起来很神奇，并且通常可以避免开始编写客户端 JavaScript 代码的需要？

对于高度交互的页面，更新面板可能会达不到要求，因为它们仍在进行回发（部分页面回发）。虽然这比整页回发更好，但更新面板对于图形更新和高度交互的网页来说仍然可能很慢。

因此，要获得良好的性能，您通常必须放弃更新面板的使用，并开始编写客户端 JavaScript。