defer js文件 & $(document).ready() & $(window).load()运行顺序

最新推荐文章于 2022-07-17 15:58:57 发布
最新推荐文章于 2022-07-17 15:58:57 发布
阅读量213 收藏
点赞数
分类专栏： 前端开发基础概念
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Xu_cipu/article/details/100993012
版权

工作中遇到需要基于某一defer文件的class动态插入值判断进行下一步操作，发现使用$(window).load()定义的函数可以实现需求，即判断发生在defer文件运行之后，而用$(document).ready()则过早执行判断，即判断发生在defer文件运行之前，导致结果永远为false。

故，三者运行时间为：
$(document).ready()最早 然后是defer文件 最后是$(window).load()中定义的代码

Huijie Xu
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript异步代码的回调地狱以及JQuery.deferred提供的promise解决方案
aty
07-22 6818
由于AJAX是异步的，所有依赖AJAX返回结果的代码必需写在AJAX回调函数中。这就不可避免地形成了嵌套，ajax等异步操作越多，嵌套层次就会越深，代码可读性就会越差。Promise对象有3种可能的状态：肯定状态(resolved)、否定状态(rejected)、等待状态(pending)。刚开始创建的Promise对象处于pending状态，只能从pending变成resolved或者是从pending变成rejected状态。可以看到Promise对象其实就是Deferred对象的一部分，Deferre
$(document).ready(function()和 window.onload()执行顺序
qq_39751320的博客
06-01 996
https://blog.csdn.net/qq_34802511/article/details/82589487 一、DOM加载过程 网页文档加载都是按顺序执行的。一般浏览器渲染操作顺序大致是一下几个步骤： 1.解析HTML结构 2.加载外部脚本和样式表文件 3.解析并执行脚本代码 4.构造HTML DOM模型 5.加载图片等外部文件 6.页面加载完毕 一、$(document).ready(function() $ (function() {}) 是$(document).ready(functi.
JQ中$(window).load和$(document).ready区别与执行顺序
and_or_ch的博客
12-14 1371
JQ中$(window).load和$(document).ready区别与执行顺序 投稿：wdc 字体：[增加 减小] 类型：转载 时间：2017-03-01 我要评论 JQ中的$(document).ready()大家应该用的非常多，基本每个JS脚本中都有这个函数的出现有时甚至会出现多个，那么另一个加载函数$(window).load相对出现的次数就很少了，下面为大家介绍一下两者的
jquery中的ready函数与window.onload谁先执行
appoFeng的专栏
03-13 1757
关于$(document).ready()：jquery中的$(document).ready()，那$(document).ready()到底是什么作用呢？是不是可以用window.onload = function(){ ... }来实现呢？这里，我们要明确二者之间的区别。我们使用window.onload = function(){ ... }，是希望在页面被载入时执行function中的处
$.Deferred 对象详解
weixin_30311605的博客
08-09 208
1.什么是deferred对象？ 开发网站的过程中，我们经常遇到某些耗时很长的javascript操作。其中，既有异步的操作（比如ajax读取服务器数据），也有同步的操作（比如遍历一个大型数组），它们都不是立即能得到结果的。 通常的做法是，为它们指定回调函数（callback）。即事先规定，一旦它们运行结束，应该调用哪些函数。 但是，在回调函数方面，jQuery的功能非常弱。为了改变这一点，jQ...
【疑问笔记】window.onload vs $(document).ready vs defer
mercury8862的专栏
08-19 427
H5属性中，script标签中自带的defer属性 的定义是   defer 属性规定当页面已完成加载后，才会执行脚本。 页面加载完成，这件事，我们已经知道的有原生的window.onload 和JQ的$(document).ready 那么 这三个属性到底有什么区别呢？？ 搜了一堆资料，也没看出个所以然，自己测试了一下，发现不管如何更改顺序，最先alert的 是defer 而后是windo
window.onload与jQuery($(document).ready())
明德zhuang
07-17 602
(document).ready()方法
详解Angular.js的$q.defer()服务异步处理
11-29
在Angular.js中，`$q.defer()` 是一个用于创建Promise对象的关键工具，它允许开发者管理异步操作。Promise是处理异步编程的一种模式，它代表了一个可能会在将来完成或者失败的操作的结果。`$q` 服务是Angular提供的...
angular-digest:安全运行的简单服务 $scope.$digest()
06-25
script src =" /bower_components/angular-digest/angular-digest.js " type =" text/javascript " charset =" utf-8 " async defer > </ script > 要在您的应用程序注入模块中使用包： angular . module ...
日志&指标&链路追踪.pptx
08-29
日志用于记录应用程序运行过程中的事件，指标则提供了系统的定量数据，而链路追踪帮助理解请求在分布式系统中的流转过程。本篇文章将深入探讨这些概念，特别是在Go语言环境下的应用。 首先，我们来看日志。Go语言...
TypeError document.getElementById(…) is null错误原因
12-09
在网页开发过程中，JavaScript 是一种常用的脚本语言，用于实现客户端的交互效果。当你尝试使用 `document.getElementById` 方法获取一个HTML元素时，如果该元素在当前文档中不存在，JavaScript 将抛出 `TypeError: ...
defer 的使用与原理
HandSome Girl
06-07 1241
defer的使用与原理
jquery的异步请求$.Deferred操作
sven_chen93的博客
05-23 374
今天记录下jq的异步请求操作，说来也是惭愧，最近才知道jq的异步请求操作（2011年就出来了），可能平时都是用的框架吧，里面都有，用jq用的少，主要是dom的操作，请求也就使用$.ajax。 给之前旧官网翻新时，从后台获取三个下拉框的值，获取后再进行搜索这个操作，直接上代码 var defer1 = $.Deferred(); //在这里定义 var getListOne = function(defer1){ $.ajax({ type: "get", url: "/api/xxxx",
AngularJS中异步操作与$q.defer()
热门推荐
一生为追梦的博客
10-21 2万+
var deferred = $q.defer();\\生成deferred异步对象 deferred.resolve(rtns);\\执行到这里时，改变deferred状态为执行成功，返回rtns为从后台取到的数据 deferred.reject(data);\\执行到这里时，改变deferred状态为执行失败，返回data为报错 return deferred.promise;\\起到保护作用，不允许函数外部改变函数内的deferred状态 把项目上的代码删去函数内容放上来，用于展示$q 的用法： $
JQuery 页面载入事件(ready)
21号先锋者
02-05 1006
@{ Layout = null; } &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta name="viewport" content="width=device-width" /&gt; &lt;title&gt;Index&lt;/title&gt; &lt;/he
jQuery的deferred对象详解
李刚的学习专栏
06-05 1万+
在讲述Promise时，曾提及过Deferred对象。下面内容，详细阐述Deferred对象及其用法。一、为什么使用Deferred对象目前，大部分浏览器已经支持原生Promise写法，但对于IE这种“古板”的浏览器我们只能硬着头皮去兼容它。Github中提供了好多插件去支持。例如babel-polyfill。但是其对目前主流前端构建工具兼容性不是很好（比如Grunt）。所以，难道我们只能去放弃Pr
DOMContentLoaded与load、defer、async的关系
宇宙
09-04 860
一、DOMContentLoaded 与 load DOMContentLoaded等html,js解析完毕，当前所属的script标签之前的css解析完毕后执行，不等待img等资源的加载。 load是等待所有资源加载完毕后执行。 所以DOMContentLoaded之后用户就可以进行交互，绑定事件可以在DOMContentLoaded后绑定，因为这时候已经能够获取到DOM节点。 二、同步,defer,async的区别 同步 defer async 三、DOMContentLoaded与defer
java jquery ready,js在页面中的加载顺序及多个jquery $(document).ready() 的执行顺序
weixin_39710561的博客
03-19 293
jQuery $(document).ready()执行顺序：当页面DOM 元素全部加载完毕后就执行.ready()。$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。如果在.ready()执行之前有javascript代码存在，那么javascript将怎么执行呢？答案是先执行.ready()之前的javascript代码，然后执行.ready()。多个$(d...
$(document).load(); $(document).ready();的执行顺序
06-06 1万+
$(document).load(); 当web页面以及其附带的资源文件，如CSS，Scripts，图片等，加载完毕后执行此方法。 常用于检测页面（及其附带资源）是否加载完毕。 $(document).ready(); 当页面DOM对象加载完毕，web浏览器能够运行JS时，此方法即被触发。如果你想尽快执行JS，可以使用此方法。[在html的头部的script标签中的，不处于read
document.getELementById is not a function at window.onload
最新发布
06-13
你可以尝试将你的 JavaScript 代码放在 HTML 文件的底部，或者使用 defer 属性来延迟脚本的执行，以确保 document 已经完全加载。另外，你也可以检查一下文档中是否存在重复的 id，这可能会导致该方法的错误。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值