li点击弹出序号
<body>
<ul>
<li>test1</li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
<li>test5</li>
<li>test6</li>
<li>test7</li>
<li>test8</li>
<li>test9</li>
<li>test10</li>
</ul>
<script>
var lis = document.querySelectorAll('ul li');
for(var i = 0, len = lis.length; i < len; i++) {
lis[i].addEventListener('click', function () {
console.log(i);
}, false);
}
</script>
</body>你运行一下代码会发现，无论你点击哪个列表，控制台都是输出10。这是因为var声明的变量是函数作用域的，而不是块级作用域的。也就是说，for循环10次，每次都是改变同一个i，所以它的值会从0一直加到10。还有个问题是闭包导致的，闭包保存的是外部变量的引用，而不是值。也就是说，循环10次监听器创建了10 个闭包，它们里面的i引用的是同一个啊。所以全部都指向了10.
要解决这个问题有两种方法。一种是使用ES6的let来替代 var i = 0 里面的var， 因为let支持块级作用域。改成如下就正常了。
for(let i = 0, len = lis.length; i < len; i++) {
lis[i].addEventListener('click', function () {
console.log(i);
}, false);
}还有一种方法，就是很多经典书本都提到的，使用立即执行函数来切断闭包对外部变量i的引用：
for(var i = 0, len = lis.length; i < len; i++) {
(function (i) {
lis[i].addEventListener('click', function () {
console.log(i);
}, false);
})(i)
}当然啦，如果对闭包不是很熟练，还可以通过事件委托来避开这个陷阱哈，代码如下：
var ul = document.querySelector('ul');
var lis = document.querySelectorAll('ul li');
ul.addEventListener('click', function (e) {
var target = e.target;
if(target.nodeName.toLowerCase() === 'li') {
console.log([].indexOf.call(lis, target));
}
}, false);使用了事件委托，减少了监听器的绑定（只对列表的父亲元素监听），这种方法说不定还会加分呢。哈哈，我当时就是用这种方法来实现的，面试官可能觉得我的解法有点不寻常、顿时一脸蒙B，甚至还一度怀疑 console.log([].indexOf.call(lis, target)) 这段代码是不是有问题。直到后来我直接在他的笔记本跑了一遍，他才相信是正确的。
下面的代码有内存泄漏吗
var user = {name: 'tom', age: 20, gender: 'male'}
var test = document.getElementByid('test')
test.onclick = function() {
test.innerHTML = user.name;
}
// ...后面还有很多其他操作，最后把user对象释放掉
user = null; // 释放对象- 实现一个算法，寻找字符串中出现次数最少的、并且首次出现位置最前的字符
如"cbaacfdeaebb"，符合要求的是"f"，因为他只出现了一次（次数最少）。并且比其他只出现一次的字符（如"d"）首次出现的位置最靠前。 - http和tpc的关系，以及什么是https
- Node的特点（优点和缺点）
- 你在腾讯和网易实习期间学到的东西？
未来三年的职业规划
至于二面的问题都不是很难，下面简单的来看一下：
第1题，基本类型（number, string, boolean, null, undefined, symbol）是在栈的，而其他的引用类型都是在堆的。垃圾回收是采用了计数引用法（如果两个对象之间存在循环引用时，会有内存泄漏，因为计数无法变为0 ）
第2题，有内存泄漏，这是闭包本身的问题。完全消除闭包的内存泄漏是不现实的，但是，如果采用下面的方法可以减少内存泄漏：
var user = {name: 'tom', age: 20, gender: 'male'}
var test = document.getElementByid('test')
(function (name) {
test.onclick = function() {
test.innerHTML = name;
}
})(user.name);
user = null;第3题算法题，也不很难，大家可以自己试试去实现 ，如果做不出来的再到评论求助啦，这里就不贴出代码了。
第4题，考察了计算机网络的tcp三次握手以及http的请求头等。https是使用安全套接字进行加密的，可以说HTTPS = SSL + HTTP。
第5题，Node的特点是异步非IO阻塞、适合高并发，但不适合密集型计算
第6、7题都是主观题，可以随便吹一下水便好。
因为当时已经是饭点时间，面试官也有点急着去吃饭，就没有再问我问题了。
li点击弹出序号的更多相关文章
- jQuery之点击弹出图标环形菜单
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...
- CSS3 页面中展示邮箱列表点击弹出发送邮件界面
CSS3 页面中展示邮箱列表点击弹出发送邮件界面 代码: <!DOCTYPE html> <html> <head> <meta charset=" ...
- jQuery第二课 点击弹出一个提示框
选择器允许您对元素组或单个元素进行操作. jQuery 选择器 在前面的章节中,我们展示了一些有关如何选取 HTML 元素的实例. 关键点是学习 jQuery 选择器是如何准确地选取您希望应用效果的元 ...
- JS 点击弹出图片/ 仿QQ商城点击左右滚动幻灯片/ 相册模块，点击弹出图片，并左右滚动幻灯片
1, 点击弹出图片 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...
- 工作当中实际运用（3）——js原生实现鼠标点击弹出div层 在点击隐藏
function onmou(){ var divs=document.getElementById('kefuDV');//获取到你要操作的div if (divs.style.display==& ...
- 点击弹出 +1放大效果 -- jQuery插件
20140110更新: <!doctype html> <html> <head> <meta charset="UTF-8"> & ...
- jquery---点击弹出层
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- form WebBrowser自动点击弹出提示框alert、弹出对话框confirm、屏蔽弹出框、屏蔽弹出脚本错误的解决办法
针对WebBrowser控件中自动点击弹出框及禁用脚本提示问题得到如下几种实际情况的解决办法,绝对管用. 1.屏蔽弹出错误脚本 将WebBrowser控件ScriptErrorsSuppressed设 ...
- js点击弹出div层
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- Javascript教程：js异步模式编程的4种解决方法
随着人们对网站视觉效果及用户体验的要求越来越高,所以在未来网站的建设中,设计师们开始越来越多的使用了js文件来达到预期的效果,随着js文件的越来越多,令设计师们最头痛的事情也就来了,那就是Javasc ...
- delphi 获取硬盘序列号、cpu号、bios号、网卡号
delphi 获取硬盘 序列号 function GetIdeNum: String; type TSrbIoControl = packed record HeaderLength : ULONG; ...
- jQuery中animate动画第二次点击事件没反应
jQuery中animate动画第二次点击事件没反应 用animate做点击翻页动画时发现第二次点击事件动画没反应,而第一次点击有动画效果,代码如下: 复制代码 代码如下: $(".page ...
- easelJS - Cache_vday
easelJS - Cache_vday $(function() { init(); }); // Cache_vday var canvas; var stage; var container; ...
- js制作ppt阅读文档类型
前几天开发中,客户要求在页面中展示一个类似ppt文档的一个东西,用轮播展示,但是有缩略图,和展示的大图,本想找些插件来做,后来想想,自己试下吧.. 有些简陋,但是能用,毕竟一行一行写的,留下来当笔记用 ...
- node源码详解 （一）
本作品采用知识共享署名 4.0 国际许可协议进行许可.转载保留声明头部与原文链接https://luzeshu.com/blog/nodesource1 本博客同步在https://cnodejs.o ...
- 怎么应用vertical-align，才能生效？
vertical-align 的使用 以前总是想要一些元素垂直居中对齐,经常用line-height,可是对于图片来说,line-height的表现并不理想(非常不理想)可看我的文章:line-he ...
- 不常见但很有用的chrome调试工具使用方法
前面的话 对于chrome调试工具,常用的是elements标签.console标签.sources标签和network标签.但实际上,还有一些不太常见但相当实用的方法可以提高网页调试效率.本文将 ...
- Android 隐藏软键盘
隐藏软键盘 public void hideSoftInputView() { InputMethodManager manager = ((InputMethodManager) this.getS ...
- [css]《css揭秘》学习（二）-多重边框
一.box-shadow属性 box-shadow除了生成投影,还可以用来生成边框:它接受第4个值作为扩张半径,0的x轴偏移+0的y轴偏移+0的模糊值+0的扩张半径,得到的显示效果和边框是一样的:但是 ...