如何延迟调用 JS 函数 - 动画 gif 在 IE 中不起作用答案

【问题标题】：how to delay call to JS function - animated gif not working in IE如何延迟调用 JS 函数 - 动画 gif 在 IE 中不起作用
【发布时间】：2012-12-28 05:08:02
【问题描述】：

我正在努力让动画 gif 在 IE 中运行。适用于所有其他浏览器，但在 IE 中它只是冻结。我对此进行了研究，看起来使用 setTimeout 的延迟可能会起作用。不太确定如何将其添加到以下函数中：

<script type="text/javascript">

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

    });

    });


</script>

gif 位于一个名为“正在加载”的 div 中，该 div 被隐藏。我会将超时添加到按钮的 onClick 还是函数本身？

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

解决此问题的任何帮助都会非常有帮助。

【问题讨论】：

提交卸载页面。您必须将表单定位到 iframe 或使用 Ajax 来运行动画。如果使用Ajax，需要取消提交事件
或许事先调用 e.PreventDefault 然后显示 div，然后使用 HTMLFormElement 的submit 方法提交表单。

标签： javascript internet-explorer

【解决方案1】：

你的意思是这样的？

$(function() {

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

        setTimeout(function () {

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

        }, 100);

    });
});

【讨论】：

这不会导致页面冻结吗？
让 OP 在他自己的实现中尝试一下。

【解决方案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 将异步运行您的代码。

【讨论】：