js中常见面试问题-笔记
原文参考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);
}
}
js中常见面试问题-笔记的更多相关文章
- js中常见的问题
js中常见的问题 原文链接 1.js获取select标签选中的值 原生js var obj = document.getElementByIdx_x(”testSelect”); //定位id var ...
- JS中常见算法问题
JS中常见算法问题 1. 阐述JS中的变量提升(声明提前) 答:将所有的变量提升当当前作用域的顶部,赋值留在原地.意味着我们可以在某个变量声明前就使用该变量. 虽然JS会进行变量提升,但并不会执行真正 ...
- JS中常见的几种报错类型
1.SyntaxError(语法错误) 解析代码时发生的语法错误 var 1a; //Uncaught SyntaxError: Invalid or unexpected token 变量名错误 c ...
- JS:JS中常见的 “函数名 is not a function” 错误
js中常见的错误,例如Uncaught TypeError: x is not a function 其原因除了函数本身有错之外,还有一种很奇怪的情况:函数本身没有错,但是运行时就是不能正常运行.这种 ...
- JS中常见设计模式总结
github: https://github.com/14glwu/FEInterviewBox/tree/master/JS%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F ...
- js中常见的数据加密与解密的方法
加密在我们前端的开发中也是经常遇见的.本文只把我们常用的加密方法进行总结.不去纠结加密的具体实现方式(密码学,太庞大了). 常见的加密方式 常见的加密算法基本分为这几类, 线性散列算法(签名算法)MD ...
- Js中常见的内存泄漏场景
常见的内存泄漏场景 内存泄漏Memory Leak是指程序中已动态分配的堆内存由于疏忽或错误等原因程序未释放或无法释放,造成系统内存的浪费,导致程序运行速度减慢甚至系统崩溃等严重后果.内存泄漏并非指内 ...
- JS中常见的几种继承方法
1.原型链继承 // 1.原型链继承 /* 缺点:所有属性被共享,而且不能传递参数 */ function Person(name,age){ this.name = name this.age = ...
- Vue.js中前端知识点总结笔记
1.框架和库的区别: 框架:framework 有着自己的语法特点.都有对应的各个模块库 library 专注于一点 框架的好处: 1.提到代码的质量,开发速度 2.提高代码的复用率 3.降低模块之间 ...
随机推荐
- php fputcsv 读取不到中文文件、数据
string setlocale(constant,location) constant 必需.规定应该设置什么地区信息. 可用的常量: LC_ALL - 包括下面的所有选项 LC_COLLATE ...
- 深入理解计算机系统10——系统级I/O
系统级I/O 输入/输出 是在主存和外部设备之间拷贝数据的过程. 外部设备可以是:磁盘驱动器.终端和网络. 输入和输出都是相对于主存而言的. 输入是从I/O设备拷贝数据到主存.输出时从主存拷贝数据到I ...
- docker 容器container运行后,如何进入容器内部?
docker exec -ti 容器ID /bin/bash
- mac 上安装vue模版-D2 Admin
1.首先下拉模版,打开mac自带“终端” 2.安装项目 3.出现的错误 4.启动项目
- Linux工具安装配置之Oracle
对于Oracle的安装真的是心生恐惧,特别是一堆堆的依赖包.趁这次DBA在南京,实际操作一番. 两种方式,1.全新安装:2.硬拷贝 全新安装,参考下面这个介绍 http://www.cnblogs.c ...
- SuperMap iClient for JavaScript 之关联查询
人们常说,计划赶不上变化.同样的,在项目中,使用的数据也是在不断变化的,尤其是属性信息的改变.就比如说,地图上的地物,它的空间信息在比较长的时间内,都不会发生变化,他的属性信息在初期不完整或者与后来的 ...
- Oracle 数据库、表、方案的逻辑备份与恢复
数据库(表)的逻辑备份与恢复 逻辑备份是指使用工具export将数据对象的结构和数据导出到文件的过程,逻辑恢复是指当数据库对象被破坏而使用工具import利用备份的文件把数据对象导入到数据库的过程,逻 ...
- 远控项目(Windows Socket)
实现内容(屏幕,鼠标,键盘实时控制) 控制端: #pragma once #ifndef keybd_H #define keybd_H #include <stdio.h> #inclu ...
- php+windows环境安装
1.下载并安装phpstorm 2.查找激活码激活phpstorm 3.由于php官方没有提供exe版本,安装phpstudy,获得windows下exe编译版本的php 4.安装VisualSVN ...
- ant如何编译项目
Ant的概念 可能有些读者并不理解什么是Ant以及如何使用它,但只要使用通过Linux系统的读者,应该知道make这个命令.当编译Linux内核及一些软件的源程序时,经常要用这个命令.Make命令其实 ...