学习前端面试知识（15）

最新推荐文章于 2024-09-30 15:42:36 发布

BHDDGT

最新推荐文章于 2024-09-30 15:42:36 发布

阅读量985

点赞数 23

分类专栏：前端学习文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/BHDDGT/article/details/141405413

版权

前端学习专栏收录该内容

18 篇文章 1 订阅

订阅专栏

防抖和节流怎么实现？

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

防抖和节流都是用于控制函数执行频率的方法，防抖是在一定时间内只执行最后一次操作，节流是在一定时间内只执行一次操作，可以通过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：用于存储不易变动的数据，如用户偏好设置，缓存数据，减轻服务器压力