学习前端面试知识（15）

防抖和节流怎么实现？

参考文章彻底理清防抖和节流

防抖和节流都是用于控制函数执行频率的方法，防抖是在一定时间内只执行最后一次操作，节流是在一定时间内只执行一次操作，可以通过setTimeout和时间戳等方法实现。

防抖：确保在指定的时间间隔内，无论触发了多少次事件，只有最后一次事件会在该时间间隔结束后执行（触发事件n秒后才执行函数，结果在n秒内又触发事件，则会重新计算函数执行时间）

核心逻辑：重置计时器，每次触发事件都会重置计时器
执行时机：只有在用户停止触发事件指定时间间隔后，才会执行最后一次事件
举例：在一台自动售货机里，商品价格不同，投入相应的硬币会自动选择相应的商品，但是为了避免还没投完就出商品，会给售货机设置延迟，延迟期间再投入硬币，售货机重新进入延迟，只有延迟过期后才会处理投进去的硬币。

<body>
<input type="text" id="search" placeholder="输入内容">
<ul id="suggestionsList"></ul>
<script>
function debounce(func,wait){let timeout;return function(...args){const content = this;clearTimeout(timeout);timeout = setTimeout(() => {func.apply(content,args);},wait)}
}const searchBox = document.getElementById("search");const search = debounce(function(query){console.log("search")
},1500)searchBox.addEventListener('input',function(event) {const query = event.target.value;search(query);
})
</script>

节流：确保在指定的时间间隔内，无论触发了多少次事件，只有第一次事件会被执行，后续事件在这个间隔中都不会执行

核心逻辑：单次执行，忽略后续触发
举例：在十字路口，交通信号灯每60秒变换一次，不论多少汽车通过，信号灯都不会更快的变化，即无论事件触发的频率多高，每个周期内只执行一次。

<head><meta charset="UTF-8"><title>Title</title><style>#contentList {list-style: none;padding: 0;overflow-y: auto;height: 300px; /* 根据需要调整这个高度 */background: #f9f9f9;}#contentList li {padding: 10px;border-bottom: 1px solid #ddd;background-color: white;}</style>
</head>
<body>
<ul id="contentList"><!-- 初始内容列表项 --><li>Item 1</li><li>Item 2</li><!-- 更多内容根据滚动加载 -->
</ul>
<script>
function throttle(func,limit){let inProgress = false;return function(){if(!inProgress){inProgress = true;setTimeout(() => {func.apply(this,arguments);inProgress = false;},limit);}}
}function loadMore(){const content = document.getElementById('contentList');if(content.scrollTop + content.clientHeight + 100 >= content.scrollHeight){console.log("加载更多内容");setTimeout(() => {for(let i = 0; i < 5; i++){const newItem = document.createElement('li');newItem.textContent = 'Item' + (content.children.length + 1);content.appendChild(newItem);}},1000)}
}const content = document.getElementById('contentList');content.addEventListener('scroll',throttle(loadMore,1000));for(let i = 2; i < 10; i++){const listItem = document.createElement('li');listItem.textContent = 'Item'+(i+1);content.appendChild(listItem);
}
</script>

vue生命周期

还是不太熟练，再记录下，参考vue生命周期

生命周期：从组件创建到组件销毁这段时间所经历的过程

beforeCreate
- 组件创建前
- 调用这个函数后创建组件实例
created
- 组件创建后
- 调用这个函数获得页面内容，准备渲染数据
beforeMount
- 组件挂载数据前
- 执行函数将数据渲染到页面上
mounted
- 组件挂载数据后
- 将data中的数据挂载到标签上
beforeUpdate
- 更新数据前
- 更新前会执行这个函数
updated
- 更新数据之后
- 内容更新后会调用这个函数
beforeDestroy
- 销毁实例前
- 执行完这个函数才会销毁当前实例
destroyed
- 销毁实例后
- 销毁实例后会执行这个函数，vue的生命周期结束

css中隐藏元素的方式

display:none
opacity:0
visibility:hidden
z-index，使用层叠顺序控制元素位置
绝对定位将元素定位到页面之外，缺点是会出现横/竖拉条
给固定的width，超出隐藏，可以结合white-space:nowrap不换行和text-overflow:ellipsis展示省略号，更详细的可以看这篇文章的最后一篇
关于三个元素display opacity visibility的解说可以看这篇文章的倒数第二个

axios和ajax的区别

ajax是对原生XHR的封装，axios是Promise对ajax的封装，axios有的ajax都有，ajax有的axios不一定有

本地存储

常见的本地存储有cookie，localStorage和sessionStorage

存储有效时间：
- cookie的有效期可以设置，失效时间取决于设置时间。
- sessionStorage有效期仅保存在当前会话中，即当前浏览器标签打开时有效，关闭后就会失效。
- localStorage数据在浏览器关闭后仍然可以保留，知道手动清空或者删除
发送是否携带
- cookie：在前端给后端发送请求的时候会自动携带cookie中的数据
- localStorage和sessionStorage不会随着HTTP请求发送到服务器，仅用于前端的存储和访问
使用场景
- cookie：常用于存储登陆验证信息，识别身份
- sessionStorage：适用于需要临时存储数据，不希望数据在关闭页面后还保存的场景，比如表单填写等
- localStorage：用于存储不易变动的数据，如用户偏好设置，缓存数据，减轻服务器压力