前端面试100问(3)
2023-09-11 14:18:53 时间
码字不易,有帮助的同学希望能关注一下我的微信公众号:Code程序人生,感谢!代码自用自取。
题目:
什么是防抖和节流?有什么区别?如何实现?
- 防抖
触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间
- 思路:
每次触发事件时都取消之前的延时调用方法
function debounce(fn) {
let timeout = null; // 创建一个标记用来存放定时器的返回值
return function () {
clearTimeout(timeout); // 每当用户输入的时候把前一个 setTimeout clear 掉
timeout = setTimeout(() => { // 然后又创建一个新的 setTimeout, 这样就能保证输入字符后的 interval 间隔内如果还有字符输入的话,就不会执行 fn 函数
fn.apply(this, arguments);
}, 500);
};
}
function sayHi() {
console.log('防抖成功');
}
var inp = document.getElementById('inp');
inp.addEventListener('input', debounce(sayHi)); // 防抖
- 节流
高频事件触发,但在n秒内只会执行一次,所以节流会稀释函数的执行频率
- 思路:
每次触发事件时都判断当前是否有等待执行的延时函数
function throttle(fn) {
let canRun = true; // 通过闭包保存一个标记
return function () {
if (!canRun) return; // 在函数开头判断标记是否为true,不为true则return
canRun = false; // 立即设置为false
setTimeout(() => { // 将外部传入的函数的执行放在setTimeout中
fn.apply(this, arguments);
// 最后在setTimeout执行完毕后再把标记设置为true(关键)表示可以执行下一次循环了。当定时器没有执行的时候标记永远是false,在开头被return掉
canRun = true;
}, 500);
};
}
function sayHi(e) {
console.log(e.target.innerWidth, e.target.innerHeight);
}
window.addEventListener('resize', throttle(sayHi));
更多关于前端的面试题内容关注我的公众号:Code程序人生。
有微信小程序课设、毕设需求联系个人QQ:505417246
关注下面微信公众号,可以领取微信小程序、Vue、TypeScript、前端、uni-app、全栈、Nodejs、Python等实战学习资料
最新最全的前端知识总结和项目源码都会第一时间发布到微信公众号,请大家多多关注,谢谢
相关文章
- WebIM技术---编写前端WebSocket组件
- 前端 常见的安全问题
- 前端基础 - JavaScript高级应用(灵活的对象模型)
- 前端基础 - JavaScript简介
- 前端面试练习-CSS实现固定宽高的div在不同分辨率屏幕上下左右居中
- 前端面试日更解答 interview-answe 2020-04-21
- 2019年底前的web前端面试题初级-web标准应付HR大多面试问题
- 前端常用算法
- vue前端导出Excel
- 前端面试刷题day3(每日更新前端面试高频考察点)
- 一个系列带你搞定前端面试的手写代码环节(5) --- 数组去重
- 一个系列带你搞定前端面试的手写代码环节(2) --- call & apply & bind
- 前端面试100问(4)
- 前端面试100问(1)
- 推荐几个大厂的前端代码规范,你也能写出诗一样的代码!
- 前端面试
- 浅析前端自动部署工具deploy-cli-service和vscode使用sftp自动部署插件
- 【前端酷站】分享一个纯 Javascript 的图表库与立体像素风制作~
- Web 前端 之 html 移动端/PC端元素长按功能的简单封装,实现元素长按事件的触发
- SpringBoot+Vue前端Http调用后台封装POI接口导出EXCEL
- 2019最新Web前端经典面试试题(含答案)
- 前端框架整理
- 前端常见跨域解决方案(全)