首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

ajax 和 js 事件执行顺序

有一个需求,滚轮滚动到相应位置的时候执行当前的动画,这个动画在footer里面,而网页的主体通过ajax进行渲染,我在js里面调用ajax渲染数据,然后再获取主体的高度,滚动到该高度的时候执行动画。...我大致想了两种解决办法,均以失败告终,本地是ajax先执行,服务器是js执行。...让获取高度的事件时间延时500ms,发现最后获取不到事件了; 将该事件写在ajax的success回调里面,结果是只有打开网页第一次能够成功,然后不管刷新多少次均无效,事件被屏蔽,所以方法二也被废除;...最后我想到了,ajax不就是一种异步方法,我将其改为同步不就行,先让ajax执行完在执行js事件。...当然这样做有弊端的,如果接口出问题,ajax渲染失败,那么整个网页的js都将执行不了。不过我想真到了数据都渲染不出的地方,访问网页就没有意义了,所以最后我采用了这种方法。

2.9K30
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    js执行栈与事件循环简单理解

    ,他就被压入栈中,这很好理解,main函数执行完成必须依赖他的执行。...事件循环 所以,事件循环其实就是js代码借助与浏览器API向消息队列中丢入一些回调函数,等待执行栈放空自己的时候,把消息队列中的回调函数压入到执行栈中执行的这么一个机制。...紧接着runWhileLoopForNSeconds(3);被压入了执行栈中,是一个函数,由于js是单线程的,因此mian也好,runWhileLoopForNSeconds也好,都会在这个执行栈所在在执行上线文中孤独的执行着...('C');被压入了执行栈,然后秒执行了,此时main总算走空了,因此事件循环现在就看消息队列中有没有消息了,已看发现有,嘿,一个一个的丢出来,放到执行栈中来执行。...总结 所以,只有当执行栈中是空的时候,事件循环机制才有机会把消息队列中的任务丢出来执行,换句话说,只有执行栈中有内容在执行事件循环就不可能给你从消息队列中取任务出来执行

    1.6K30

    js动画事件_JavaScript事件

    js之动画事件 首先,动画事件主要包括以下三个animationstart,animationiteration和animationend事件,下面做简单分别介绍。...animationstart 该事件在css动画开始播放时触发 animationiteration 该事件在css动画重新播放时触发 animationend 该事件在css动画结束播放时触发 我们知道...animation:name duration timing-function delay iteration-count direction; 分别是:动画名称 动画持续事件 动画运行速度曲线 动画开始时的运行时间...this.innerHTML="动画正在运行"; x.style.background="pink"; } function myanimationiterration() //动画再次运行触发,同样也是通过事件监听...this.innerHTML="动画重新运行"; x.style.background="greenyellow"; } function myanimationend() //动画运行结束时触发,同样也是通过事件监听事件

    18.4K10

    Js 事件委托(事件代理)

    一、概述 事件委托,又叫事件代理。事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。 例子:有三个同事预计会在周一收到快递。...二、为什么是使用事件委托 一般来说,dom需要有事件处理程序,我们都会直接给它设事件处理程序就好了,那如果是很多的dom需要添加事件处理呢?...,这就是为什么性能优化的主要思想之一就是减少DOM操作的原因;如果要用事件委托,就会将所有的操作放到js程序里面,与dom的操作就只需要交互一次,这样就能大大的减少与dom的交互次数,提高性能; 每个函数都是一个对象...三、事件委托原理 事件委托利用的是事件冒泡原理,将事件绑定到父级元素上,当点击子元素时,通过事件冒泡将事件传递到父级元素。  四、总结: 那什么样的事件可以用事件委托,什么样的事件不可以用呢?...适合用事件委托的事件:click,mousedown,mouseup,keydown,keyup,keypress。

    11.4K30

    js事件大全

    一般事件 事件 浏览器支持 描述 onClick IE3|N2|O3 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击 onDblClick IE4|N4|O 鼠标双击事件 onMouseDown...onMouseMove IE4|N4|O 鼠标移动时触发的事件 onMouseOut IE4|N3|O3 当鼠标离开某对象范围时触发的事件 onKeyPress IE4|N4|O 当键盘上的某个键被按下并且释放时触发的事件...onStop IE5|N|O 浏览器的停止按钮被按下时触发的事件或者正在下载的文件被中断 onUnload IE3|N2|O3 当前页面将被改变时触发的事件 表单相关事件 事件 浏览器支持 描述...滚动字幕事件 事件 浏览器支持 描述 onBounce IE4|N|O 在Marquee内的内容移动至Marquee显示范围之外时触发的事件 onFinish IE4|N|O 当Marquee...元素完成需要显示的内容后触发的事件 onStart IE4|N|O 当Marquee元素开始显示内容时触发的事件 编辑事件 事件 浏览器支持 描述 onBeforeCopy IE5|N|O 当页面当前的被选择内容将要复制到浏览者系统的剪贴板前触发的事件

    3.8K10

    JS 事件循环

    ,脚本执行事件处理等 其包含的线程有:GUI 渲染线程(负责渲染页面,解析 HTML,CSS 构成 DOM 树)、JS 引擎线程、事件触发线程、定时器触发线程、http 请求线程等主要线程 关于执行中的线程...: 主线程:也就是 js 引擎执行的线程,这个线程只有一个,页面渲染、函数处理都在这个主线程上执行。...工作线程:也称幕后线程,这个线程可能存在于浏览器或js引擎内,与主线程是分开的,处理文件读取、网络请求等异步事件。...在事件循环中,每进行一次循环操作称为tick,通过阅读规范可知,每一次 tick 的任务处理模型是比较复杂的,其关键的步骤可以总结如下: 在此次 tick 中选择最先进入队列的任务( oldest task...),如果有则执行(一次) 检查是否存在 Microtasks ,如果存在则不停地执行,直至清空Microtask Queue 更新 render 主线程重复执行上述步骤 可以用一张图来说明下流程:

    15.4K10

    js --- 事件

    1.事件流   事件发生时会在元素节点与根节点之间按照特定的顺序传播,路径所经过的所有节点都会收到该事件,这个传播过程即DOM事件流。...2.两种事件流模型   1.冒泡型事件流:事件的传播是从最特定的事件目标到最不特定的事件目标。即从DOM树的叶子到根   2.捕获型事件流:事件的传播是从最不特定的事件目标到最特定的事件目标。...即从DOM树的根到叶子 3.绑定事件的方法   1.普通浏览器 绑定事件:addEventListener(type,name,bool);     删除事件:removeEventListener...()   2.ie 低版本 绑定事件:attachEvent()     删除事件:detachEvent() 4.参数说明 type 事件类型 例如:click load   name...事件执行函数   bool true 为事件捕获 && false 为事件冒泡 5.阻止事件冒泡和 事件捕获 1.阻止事件冒泡 不 阻止默认行为     event.stopPropagation

    7.6K30

    js事件循环

    首先,我们来解释下事件循环是个什么东西: 就我们所知,浏览器的js是单线程的,也就是说,在同一时刻,最多也只有一个代码段在执行,可是浏览器又能很好的处理异步请求,那么到底是为什么呢?...从上图我们可以看出,js主线程它是有一个执行栈的,所有的js代码都会在执行栈里运行。...我在node环境和chrome控制台输出的结果如下: 1 9 7 8 2 3 10 11 12 13 在上面的例子中 第一次事件循环: console.log(1)被执行,输出1 settimeout1...在这里,大家可以会想,在第一次循环中,为什么不是macrotask先执行?因为按照流程的话,不应该是先检查macrotask队列是否为空,再检查microtask队列吗?...原因:因为一开始js主线程中跑的任务就是macrotask任务,而根据事件循环的流程,一次事件循环只会执行一个macrotask任务,因此,执行完主线程的代码后,它就去从microtask队列里取队首任务来执行

    18.8K41

    Qt手动执行一次事件循环(解决一些同步问题)

    当没有事件需要处理时,Qt 应用程序会进入一个阻塞状态,直到下一个事件到来。 在 Qt 中,事件主要由两个部分组成:事件对象和事件接收者。...事件对象是一个描述事件的类,它包含了事件类型、事件参数等信息。事件接收者则是指接收并处理该事件的对象,可以是 Qt 内部的某个部件,也可以是用户定义的对象。...当一个事件发生时,Qt 会将该事件打包成一个事件对象,并将其投递到事件接收者的事件队列中。...如果一个事件接收者无法处理该事件,它会将事件传递给其父对象,直到事件被某个对象处理为止。 事件循环的具体实现是 Qt 的事件处理器(Event Dispatcher)负责的。...如果想要手动触发一次事件循环,可以使用 QCoreApplication::processEvents() 函数。该函数会强制处理当前消息队列中的所有事件

    83920

    JS事件

    事件 HTML中与javascript交互是通过事件驱动来实现的,例如鼠标点击事件、页面的滚动事件onscroll等等,可以向文档或者文档中的元素添加事件侦听器来预订事件。...DOM2级事件规定的事件流包括三个阶段: + 事件捕获阶段 + 处于目标阶段 + 事件冒泡阶段 注意:warning::先捕获后冒泡,但是在目标节点上谁写在前面谁先执行。...但是在目标元素上不区分冒泡还是捕获,按绑定的顺序来执行。 ? DOM事件级别 ? DOM0:不是W3C规范。 DOM0级事件具有极好的跨浏览器优势,会以最快的速度绑定。...绑定方式有如下两种 行内绑定(内联模型): 通过在JS中选中某个节点,然后给节点添加onclick属性 "btnClick()">按钮 function btnClick(){...console.log("hello"); } script> 复制代码 动态脚本: 通过在JS中选中某个节点,然后给节点添加onclick属性 "btn">按钮 var btn =

    8.3K20

    js鼠标事件

    页面加载事件(onload),鼠标双击事件(ondbclick) window.onload=function(){                 //绑定元素,执行对应事件 鼠标双击(ondblclick...(){                     alert('我是双击显示的');                 }             } 鼠标摁下(onmousedown)事件(摁下就执行,鼠标无需抬起...(摁下后,鼠标回弹才执行)             window.onload=function(){                 //绑定元素,执行鼠标抬起事件   鼠标抬起(onmouseup)...            window.onload=function(){                 //绑定元素,执行鼠标移动事件   鼠标移动(onmousemove)                 ...,移入事件需要移入到指定的对象内才执行事件

    18.2K40
    领券