在JavaScript函数运行时加载图像

Question

有没有办法在JavaScript函数运行时显示加载图像。我有一个需要大约2-5秒，如果我可以有类似jQuery-ajax函数的东西会很好

$("#loading").bind("ajaxStart", function(){
    $(this).attr("style", "visibility: visible")
}).bind("ajaxStop", function(){
    $(this).attr("style", "visibility: hidden")
});

澄清编辑：

这个想法是每次JavaScript函数运行并接管时，比如3/4秒，就会显示加载图像。它实际上与这个ajax函数无关，就像始终捕获正在运行的JavaScript并对其进行计时一样。

谢谢！

Answer 1

那么......评论之后，这会改变一切。

当任何javascript运行时，你不能自动显示它，因为没有真正的钩子。但是，您可以使用.trigger()和.bind()使用您自己的自定义事件来利用jquery自定义事件。

function myFunctionThatDoesSomething() {
  $('body').trigger('Custom.BeginWork');

  // Do Something ...

  $('body').trigger('Custom.EndWork');
}

虽然长时间运行的操作可能应该异步完成，所以它们不会阻止事件：

$("#Something").click(function() {
   $('body').trigger('Custom.BeginWork');
   setTimeout(function() { DoWorkFunction(/* you can pass params here if you need */); }, 0); 
   // Causes it to be executed in the background 0ms from now
});

function DoWorkFunction() {
   // Stuff...

   $('body').trigger('Custom.EndWork');
}

然后注册一个.bind()事件，就像.ajaxStart()和.ajaxStop()

一样

$('#Working').bind('Custom.StartWork', function() {
  $(this).show();
});

$('#Working').bind('Custom.EndWork', function() {
  $(this).hide();
});

这是working jsFiddle Example。

---

更新

在your jsFiddle中你做了一个双setTimeout。这里：

setTimeout(function() {
        // Call Operation Here
        try { setTimeout(function () { LongRunningOperation(10000);  }, 1000);
        }
        finally
        {
            $("body").trigger('Custom.End');
        }
    }, 50); // 50ms delay because some browsers *cough*IE*cough* are slow at rendering dom changes

这意味着：

因此，在{strong>调度要运行的长时间运行的函数之后，Custom.End事件被触发，而不是在它完成时。 setTimeout 异步且无阻塞。