事件循环
单线程的js在处理异步事件时进行的一种循环过程。
在 JS中任务分为同步与异步任务,其中异步任务又分为两种:宏任务和 微任务。宏任务和微任务的执行顺序:总方针是先同步再异步,异步中先微任务,在宏任务。一次事件循环只执行一个宏任务,所以先清理完微任务,在清理一个宏任务结束后,开启下一次事件循环,即检查有无新增微任务,直到所有的异步任务执行完
await
await用于等待一个异步操作的完成,并获取其最终结果。在使用"await"时,函数会被暂停,直到异步操作完成才会继续执行
伪类、伪元素
伪类:
为处于某个状态的已有元素添加对应的样式,这个状态是根据用户行为而动态改变的
状态伪类:基于元素当前状态进行选择的,元素的样式会根据其状态呈现不同的样式,当元素处于某状态时会呈现该样式,而进入另一状态后,该样式也会失去。
常见的状态伪类
:link 应用于未被访问过的链接; :hover 应用于鼠标悬停到的元素;:active 应用于被激活的元素;:visited 应用于被访问过的链接,与:link互斥。:focus 应用于拥有键盘输入焦点的元素。
结构性伪类 :css3新增选择器,利用dom树进行元素过滤,通过文档结构的互相关系来匹配元素,能够减少class和id属性的定义,使文档结构更简洁
:first-child 选择某个元素的第一个子元素; :last-child 选择某个元素的最后一个子元素;:nth-child(n) 匹配属于其父元素的第 n个子元素,不论元素的类型;
伪元素:
创建一些不在文档树中的元素,并为其添加样式
选择器 例子 例子描述
::after p::after 在每个 <p> 元素之后插入内容。
::before p::before 在每个 <p> 元素之前插入内容。
::first-letter p::first-letter 选择每个 <p> 元素的首字母。
::first-line p::first-line 选择每个 <p> 元素的首行。
::selection p::selection 选择用户选择的元素部分。
选择器权重
选择器 权重 权重的等级
!important 无穷大 0
style 属性 1,0,0,0 1
id 选择器 0,1,0,0 2
类、伪类、结构伪类、属性选择器 0,0,1,0 3
标签、伪元素选择器 0,0,0,1 4
通配符选择器 0,0,0,0 5
继承的样式 没有权重 6
for in与for of 区别
1. for...in :用于遍历对象的可枚举属性(包括原型链上的属性)。
适合遍历对象的属性。
返回的是属性名(字符串)。
2. for...of:用于遍历可迭代对象(如数组、字符串、Map、Set).
适合遍历数组元素或其他可迭代对象的值。
返回的是值,而不是索引或属性名。
防抖、节流
1.防抖: 在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时
function debounce(fn, wait){let timer = null;return function(...args){ let context = this,// 如果此时存在定时器的话,则取消之前的定时器重新记时 if (timer) { clearTimeout(timer); timer = null; } // 设置定时器,使事件间隔指定事件后执行 timer = setTimeout(() =>{ fn.apply(context,args); }, wait); };
}
2.节流 :节流就是指连续触发事件但是在 n 秒中只执行一次函数
function throttle(fn, delay) {let lastcalltime = 0; // 使用更具描述性的变量名 return function(...args){ //使用剩余参数语法 const context = this; // 显式捕获this上下文 const now = Date.now(); //使用更具描述性的变量名 // 如果两次调用之间的时间间隔大于或等于指定的延迟 if (now - lastcallTime >= delay) { // 更新最后调用时间 lastCallTime = now; // 调用原始函数,并传入正确的上下文和参数 return fn.apply(context, args); //如果不满足条件,则不执行任何操作(即“节流”) };
}