如何使用img.onload iside $ .when函数

时间:2015-11-17 12:16:29

标签: javascript jquery angularjs

如何使用img.onload iside $.when function我想在$ when内加载图片,然后按顺序警告序列 1-alert("1") 2-alert("2") 3- alert("3")

function temp()
     {
       $.when(function(){
       var img=new Image();
       img.onload=function()
       {
         alert("1")
       }
      img.src=url;

      }).then(function(){  
      alert("2")
      })

    alert("3")
    }

1 个答案:

答案 0 :(得分:0)

来自jquery api documentation

  

描述:提供了一种基于一个或多个对象执行回调函数的方法,通常是表示异步事件的Deferred对象。

这里的异步这个词意味着在收到数据之前该函数不会执行,除非网络时间短于执行时间,否则警报序列按顺序排列的可能性非常小以下javascript。

当遇到$.when函数时会发生什么,它允许JS以某种方式跳过这个函数并继续执行脚本,直到函数收到请求的响应为止。

在这种情况下,请求来自您在$.when中设置的 src 属性 - JS然后继续执行您的脚本并通知{{1这就是它首先要做的事情,但是当加载实际图像时,alert('3')将会触发,而这将触发你的$.when并且因为连接的回调alert('1')被链接到$.then $.when将最终终结。

您无法根据此结构构建警报,也不能可靠

如果您希望将alert('2')alert('1')alert('2')解雇,可以将功能更改为此(这将不再需要alert('3'))< / p>

$.when

由于您使用警报而不是任何实际代码显示您的示例,因此很难看到您尝试执行的操作,但执行此操作会等到图像加载后基本上会向您发送垃圾邮件。

在JS中,在整个地方产生警报并不是特别受欢迎 - 它们很丑陋且不一致,而且在加载图像时你绝对不想在任何情况下显示其中的3个(除非你的名字是photoshop ofcourse ^。 ^)。

无论哪种方式,希望它有所帮助 - 阅读文档以获取有关function temp() { var img = new Image(); img.onload = function() { alert('1'); alert('2'); alert('3'); } img.src = url // make sure url is set somewhere! } 的更多信息 - 每个认真的程序员通过在使用该函数实现实际脚本之前阅读文档深入理解方法的工作原理来获取他的知识

(当然事实并非如此,大多数开发人员只是使用功能,有时会想知道为什么他们按预期工作但是有一段时间他们厌倦了没有理解,他们最终会像上一段那样结束:))