Question

背景信息：在我的产品网站上，我有一个Java webstart应用程序的链接（在几个位置）。

我的目标：防止用户双击，i。即仅在第一次点击时“开火”，等待3秒再重新启用链接。单击时，将链接图像更改为表示应用程序正在启动的内容。

我的解决方案有效，但点击后图片无法可靠更新。注释掉的调试输出为我提供了正确的内容，鼠标悬停回调也能正常工作。

看到它在这里运行：http://www.auctober.de/beta/（点击按钮“jetzt starten”）。

顺便说一句：如果有人有更好的方法来调用延迟函数而不是虚拟动画，请告诉我。

JavaScript的：

<script type="text/javascript">
      <!--
        allowClick = true;
        linkElements = "a[href='http://www.auctober.de/beta/?startjnlp=true&rand=1249026819']";
        $(document).ready(function() {
            $('#jnlpLink').mouseover(function() {
                if ( allowClick ) {
                    setImage('images/jetzt_starten2.gif');
                }
            });
            $('#jnlpLink').mouseout(function() {
                if ( allowClick ) {
                    setImage('images/jetzt_starten.gif');
                }
            });

           $(linkElements).click(function(evt) {
                if ( ! allowClick ) {
                    evt.preventDefault();
                }
                else {
                    setAllowClick(false);
                    var altContent = $('#jnlpLink').attr('altContent');
                    var oldContent = $('#launchImg').attr('src');
                    setImage(altContent);
                    $(this).animate({opacity: 1.0}, 3000, "", function() {
                        setAllowClick(true);
                        setImage(oldContent);
                    });
                }
            });

        });

        function setAllowClick(flag) {
            allowClick = flag;
        }
        function setImage(imgSrc) {
            //$('#debug').html("img:"+imgSrc);
            $('#launchImg').attr('src', imgSrc);
        }
      //-->
</script>

Answer 1

使用setTimeout函数

可以实现延迟

setTimeout(function() { alert('something')}, 3000);//3 secs

对于你的src问题，请尝试：

$('#launchImg')[0].src = imgSrc;

Answer 2

查看BlockUI插件。听起来它可能就是你要找的东西。

你会找到一个不错的演示here。

Answer 3

......或者只是使用：

$(this).animate({opacity: '1'}, 1000);

在你的代码中你想要的地方，其中$（this）已经是opacity = 1 ......这意味着一切看似暂停一秒钟。我一直都在用这个。

Answer 4

在脚本顶部添加此变量：

var timer;

实施此功能：

function setFlagAndImage(flag) {
    setAllowClick(flag);
    setImage();
}

然后用：

替换虚拟动画

timer = window.setTimeout(function() { setFlagAndImage(true); }, 3000);

如果还有其他事情发生并且你想要停止计时器，你可以打电话：

window.clearTimeout(timer);

jQuery函数attr（）并不总是更新img src属性

4 个答案: