js中常见面试问题-笔记

Posted 2020-09-19 daV_chen

原文参考https://mp.weixin.qq.com/s/mCVL6qI33XeTg4YGIKt-JQ

1.事件代理
给父元素添加事件，利用事件冒泡原理，在根据e.target来获取子元素
<ul id="parentBox">
<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>
</ul>
let parentBox = document.getElementById(‘parentBox‘);
parentBox.addEventListener(‘click‘,function(e){
if(e.target && e.target.nodeName === ‘LI‘){
let item = e.target;
console.log(item);
}
})
2.在循环中使用闭包
var arr = [1,2,3,4,5];
for(var i=0; i<arr.length; i++){
setTimeout(function(){
console.log(i)
},1000)
}
输出结果为：5,5,5,5,5
想要让i输出0,1,2,3,4
方法一使用闭包
for(var i=0; i<arr.length; i++){
setTimeout(function(j){// 这里将值传入
console.log(j)// 这里接受
}(i),1000)// 闭包的使用
}
方法二let关键字
for(let i=0; i<arr.length; i++){
setTimout(function(){
console.log(i)
},1000)
}
3.滚动页面和窗口调整时，触发事件。
核心思想利用setTimeout延迟功能，来处理事件。
// 参数一接受执行函数，参数二延迟时间
function debounce(fn,delay){
// 维护一个timer
let timer = null;
// 能访问timer的闭包
return function(){
// 通过this和arguments获取函数的作用域和变量
let context = this;
let args = arguments;
// 如果事件被调用，清除timer然后重新设置timer
clearTimeout(timer);
timer = setTimeout(function(){
fn.apply(context,args);
},delay);
}
}