JavaScript----同步异步,offset,client,scroll,结尾附带小案例

最新推荐文章于 2022-06-21 15:38:44 发布

小白_小可

最新推荐文章于 2022-06-21 15:38:44 发布

阅读量355

点赞数

分类专栏：笔记文章标签： html javascript js

本文链接：https://blog.csdn.net/Layfolk_XK/article/details/111942177

版权

同步任务与异步任务:

在介绍同步任务与异步任务之前,我们首先要了解一下JS的执行机制,JS语言最大的特点是单线程(单线程:同一个时间只能一件事情)

在DOM操作中充分的展现了单线程的特征:创建一个元素,只有等这个元素创建完成之后才可以将这个元素添加到某个节点中去

但是单线程会导致若一个JS执行的时间过长,会导致页面渲染不连贯,造成这个的原因就是延时任务(计时器,资源加载,事件…)之后的任务要等待延时任务的完成才能执行,若这个延时任务所耗时间过长,后面的任务就会一直进行等待

这个问题计算机采用了CPU多核的特征进行解决,允许JS创建多个线程,但是创建出来的所有子线程全部受制于主线程

**同步任务:**就是之前说的单线程,程序执行的顺序和任务的排列顺序是一致的,主线程上的任务排队执行

**异步任务:**就是之前说的多线程,不进入主线程,而是进入一个"任务队列"的任务,当主线程中的任务执行完,才会从任务队列中取出异步任务放入主线程执行,JS中异步任务是通过回调函数(当一个任务执行完成之后回过头来调用的这个函数)来实现的

同步与异步的本质区别就是这条流水线上的各个流程的执行顺序不同

接下来我们来详细的看一看JS的执行机制:

话不多说–看图

在这里插入图片描述

首先第一步先执行主线程中的同步任务
第二步当执行到异步任务时,将回调函数放入到任务队列中
最后一旦执行栈中的所有同步任务执行完毕,系统就会自动按照次序读取任务队列中的异步任务,通过这种方式被读取的异步任务结束等待过程,进入到执行栈中,开始执行

元素偏移量offset:

介绍完了同步和异步任务,我们接着来介绍BOM操作中的元素偏移量offset

offset相关的属性可以动态的得到元素的位置(偏移),大小等

注意：返回的数据都是不带单位的数字类型

offset系列属性:

offsetParent----返回作为该元素带有定位的父元素，如果父元素无定位返回的是body
offsetTop----返回元素相对于带有定位的父元素的上方的偏移量
offsetLeft----返回元素相对于带有定位的父元素的左方的偏移量
offsetWidth----返回元素自身包括padding、边框、内容区域的宽度
offsetHeight----返回元素自身包括padding、边框、内容区域的宽度

在这里我们要特别注意一下offset和style区别:

offset	style
可以得到任意样式表中的样式值	只能得到行内样式表的样式值
获得的数值没有单位	style.width获得的是带有单位的字符串
offsetWidth包含：padding+border+width	style.width获得不包含padding和border的值
offsetWidth等属性是只读属性，无法设置数据	style.width是可读可写属性，可以取值也可以设置值

元素可视区client:

client 翻译过来就是客户端,我们使用 client 系列的相关属性来获取元素可视区的相关信息,通过 client 系列的相关属性可以动态的得到该元素的边框大小,元素大小等

client系列属性:

clientTop----获取元素的上边框的大小
clientLeft----获取元素的左边框的大小
clientWidth----返回自身的padding,内容区宽度,不含边框,返回数据不带单位
clientHeight----返回自身的padding,内容区高度,不含边框,返回数据不带单位

元素滚动scroll:

scroll是控制页面滚动,使用scroll系列属性可以动态的获取该元素的大小,滚动距离等

csroll系列属性:

scrollTop----返回被卷到上侧的距离

scrollLeft----返回被卷到左侧的距离

scrollWidth----返回自身的实际宽度，不含边框

scrollHeight----返回自身的实际高度，不含边框

在使用scroll方法时,由于我们使用的浏览器的不同,经常会出现兼容性问题

IE6/7/8/9/10：

对于没有doctype声明的页面里可以使用 document.body.scrollTop 来获取 scrollTop高度
对于有doctype声明的页面则可以使用 document.documentElement.scrollTop

Safari:

safari 比较特别，有自己获取scrollTop的函数:window.pageYOffset

Firefox:

火狐等等相对标准些的浏览器就省心多了,直接用 document.documentElement.scrollTop

因此我们这样来进行解决:

var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

案例:

制作一个登陆页面,页面可以随着鼠标拖动而移动

<!DOCTYPE html

最低0.47元/天解锁文章

小白_小可

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript----同步异步,offset,client,scroll,结尾附带小案例

同步任务与异步任务:在介绍同步任务与异步任务之前,我们首先要了解一下JS的执行机制,JS语言最大的特点是单线程(单线程:同一个时间只能一件事情)在DOM操作中充分的展现了单线程的特征:创建一个元素,只有等这个元素创建完成之后才可以将这个元素添加到某个节点中去但是单线程会导致若一个JS执行的时间过长,会导致页面渲染不连贯,造成这个的原因就是延时任务(计时器,资源加载,事件…)之后的任务要等待延时任务的完成才能执行,若这个延时任务所耗时间过长,后面的任务就会一直进行等待这个问题计算机采用了CPU多核的特
复制链接

扫一扫