javascript - 在 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 运行时，您不能让它自动显示，因为没有真正的 Hook 。但是，您可以通过使用 .trigger() 来利用 jquery 自定义事件。和 .bind()使用您自己的自定义事件。

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

这意味着:

因此，Custom.End 事件在安排 长时间运行的函数运行后触发，而不是在它完成时触发。 setTimeout 是异步和非阻塞的。