如何延迟调用JS函数 - IE中动画GIF无法工作

Question

我在尝试让一个动态gif图在IE浏览器中运行。在其他所有浏览器中都可以运行，但在IE中它却会停滞不前。我已经进行了研究，发现使用setTimeout来延迟可能会起作用。但我不太确定如何将其添加到以下函数中：

<script type="text/javascript">

    $(function(){
        $('#photo_form').on("submit", function () {
        $('#loading').show();

    });

    });


</script>

里面有一个gif，它是隐藏的。我应该把超时时间添加到按钮的onClick事件中还是在函数本身内部添加？

为什么IE要让事情变得如此困难！

任何有关解决此问题的帮助都将非常有用。

- user1022772

---

提交会卸载页面。您需要将表单定位到iframe或使用Ajax来运行动画。如果使用Ajax，则需要取消提交事件。 - mplungjan

也许可以在显示 div 之前先调用 e.PreventDefault，然后使用 HTMLFormElement 的 submit 方法提交表单。 - Austin

Answer 1

你的意思是像这样吗？

$(function() {

    $('#photo_form').on("submit", function () {

        setTimeout(function () {

              $('#loading').show();

        }, 100);

    });
});

- frenchie

---

这不会导致页面冻结吗？ - dmarra

让 OP 尝试在他自己的实现中尝试这个。 - frenchie

Answer 2

尝试这个粗糙、未经测试的伪代码：

var startTime;
var thread;

$(function(){
        $('#photo_form').on("submit", function () {
        $('#loading').show();
    startTime = time();
    thread = setInterval("showLoadingGif", 1);

    });

function showLoadingGif() {
    var timeToWait = 5; //change interval as needed
    if(timeToWait + startTime <= currentTime) {
        //show the gif
        clearInterval(thread);
    }
}

我已经很久没有使用过JavaScript了，所以这几乎肯定需要调整；但原则是相同的：不断调用该函数，并让该函数决定何时停止被调用。

setTimeout()会在等待期间导致页面冻结。setInterval将异步运行您的代码。

- dmarra