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)) 这段代码是不是有问题。直到后来我直接在他的笔记本跑了一遍,他才相信是正确的。

  1. 下面的代码有内存泄漏吗

    var user = {name: ‘tom‘, age: 20, gender: ‘male‘}
    var test = document.getElementByid(‘test‘)
    test.onclick = function() {
     test.innerHTML = user.name;
    }
    // ...后面还有很多其他操作,最后把user对象释放掉
    user = null; // 释放对象
  2. 实现一个算法,寻找字符串中出现次数最少的、并且首次出现位置最前的字符
    如"cbaacfdeaebb",符合要求的是"f",因为他只出现了一次(次数最少)。并且比其他只出现一次的字符(如"d")首次出现的位置最靠前。
  3. http和tpc的关系,以及什么是https
  4. Node的特点(优点和缺点)
  5. 你在腾讯和网易实习期间学到的东西?
  6. 未来三年的职业规划

至于二面的问题都不是很难,下面简单的来看一下:

  • 第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题都是主观题,可以随便吹一下水便好。

因为当时已经是饭点时间,面试官也有点急着去吃饭,就没有再问我问题了。

时间: 2024-10-16 12:14:25

li点击弹出序号的相关文章

Js面试题(三)--js点击弹出对应序号

<!-- 点击ul的五个li元素,分别弹出序号 --> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> 第一种方法,当然也是最容易想到 第二种方法,采用外部参数函数调用 第三种方法,采用设置属性,点击事件,然后对应方法 第四种方法,分别让每个li对象设置index关联到

jquery之点击弹出图标环形菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

jQuery点击弹出层,弹出模态框,点击模态框消失

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 <!DOCTYPE html>

点击弹出居中带有透明遮罩层窗口

点击弹出居中带有透明遮罩层窗口:本章节介绍一下如何点击一个按钮实现弹出一个居中窗口,并且此窗口带有半透明的遮罩层效果,此效果在当下比较流行,当然还有更为复杂的实现方式,当然效果也更为绚丽,下面介绍的代码能够简单实现此效果.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="htt

点击弹出弹性下拉菜单效果

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta name="keywords" content="站长,网页特效,js特效,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效 网" /><meta name="

PopupWindow-----点击弹出 PopupWindow 初始化菜单

/** * 点击弹出 PopupWindow 初始化菜单 */ private void initPopupWindow() { PopupWindowAdapter adapter = new PopupWindowAdapter(); mPopDisplay.setAdapter(adapter); //mPopDisplay 是mPopView 中的listview if (mPopupWindow == null) { // mPopView view对象xml文件 mPopupWind

经验总结:WebBrowser自动点击弹出提示框alert、弹出对话框confirm、屏蔽弹出框、屏蔽弹出脚本错误的解决办法

经验总结:WebBrowser自动点击弹出提示框alert.弹出对话框confirm.屏蔽弹出框.屏蔽弹出脚本错误的解决办法 网上有好多解决方法,可是不一定好使,本人经过多次试验,针对WebBrowser控件中自动点击弹出框及禁用脚本提示问题得到如下几种实际情况的解决办法,绝对管用. 1.屏蔽弹出错误脚本 将WebBrowser控件ScriptErrorsSuppressed设置为True即可. (参考本篇博客:http://www.cnblogs.com/qqflying/archive/20

ActionBar点击弹出下拉框操作

在使用Ubuntu作为开发环境时经常需要在全局安装一些依赖框架等,这个时候就常常需要用到root权限,但是在Ubuntu下第一次使用su命令时会提示认证失败:查找资料后发现Ubuntu下root权限默认是锁定的,可能是处于安全考虑,但是作为开发人员肯定是需要root权限的. 在命令行中可以输入下面命令设置root密码,这样就能随时使用root权限了: [email protected]:~$ su 密码: su:认证失败 [email protected]:~$ sudo passwd [sud

基于jQuery鼠标点击弹出登陆框效果

基于jQuery鼠标点击弹出登陆框效果.这是一款扁平样式风格的jQuery弹出层登陆框特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <input type="button" class="one" value="点击我查看效果" /> <div class="box"> <div class="box2"> <div class=&quo