品牌动态

当前位置:新萄京娱乐场手机版 > 品牌动态 > 1.事件代理

1.事件代理

来源:http://www.chrisproduction.com 作者:新萄京娱乐场手机版 时间:2019-10-08 06:10

图例详解那道setTimeout与循环闭包的出色面试题

2017/03/06 · JavaScript · 1 评论 · settimeout, 闭包

原来的文章出处: 波同学   

图片 1

配图与本文毫不相关

我在详细图解成效域链与闭包一文中的结尾留下了二个关于setTimeout与循环闭包的思索题。

选用闭包,修改下边的代码,让循环输出的结果依次为1, 2, 3, 4, 5

JavaScript

for (var i=1; i<=5; i++) { setTimeout( function timer() { console.log(i); }, i*1000 ); }

1
2
3
4
5
for (var i=1; i<=5; i++) {
    setTimeout( function timer() {
        console.log(i);
    }, i*1000 );
}

值得欢愉的是不胜枚举爱人在读了稿子之后确实对闭包有了更进一竿深入的垂询,并准确的交付了两种写法。一些有相爱的人能够认真的阅读小编的稿子同一时间二个例证八个事例的左侧演习,这种承认对自己而言实在拾叁分激动。不过也可以有部分基础稍差的相恋的人在翻阅了后来,对于那题的领悟如故以为狐疑,由此应一些读者老爷的渴求,借此文章特地对setTimeout实行贰个连锁的知识共享,愿我们读完以往都能够有新的获取。

在中期学习setTimeout的时候,大家很轻巧明白setTimeout有多少个参数,第一个参数为壹个函数,大家因此该函数定义将要实行的操作。第三个参数为三个时刻微秒数,表示延迟推行的大运。

setTimeout(function() { console.log('一分钟之后笔者将被打字与印刷出来') }, 一千)

1
2
3
setTimeout(function() {
    console.log('一秒钟之后我将被打印出来')
}, 1000)

图片 2

上例试行结果

或是过多人对此setTimeout的通晓止步于此,但照旧有为数不菲人发掘了一部分别样的东西,并在议论里提出了疑问。例如上海体育场合中的这几个数字7,是哪些?

每叁个setTimeout在实施时,会回来叁个独一ID,上海体育场地中的数字7,就是其一唯一ID。大家在采纳时,平常会采取四个变量将那么些唯一ID保存起来,用以传入clearTimeout,清除放大计时器。

var timer = setTimeout(function() { console.log('假使不排除作者,作者将会一秒以往出现。'); }, 一千) clearTimeout(timer); // 清除之后,通过setTimeout定义的操作并不会奉行

1
2
3
4
5
var timer = setTimeout(function() {
    console.log('如果不清除我,我将会一秒之后出现。');
}, 1000)
 
clearTimeout(timer);  // 清除之后,通过setTimeout定义的操作并不会执行

接下去,大家还亟需思索别的叁个注重的难点,那就是setTimeout中定义的操作,在怎么样时候实行?为了引起我们的赏识,我们来走访下边包车型客车例证。

var timer = setTimeout(function() { console.log('setTimeout actions.'); }, 0); console.log('other actions.'); // 思索一下,当作者将setTimeout的延迟时间设置为0时,上面包车型地铁奉行顺序会是何等?

1
2
3
4
5
6
7
var timer = setTimeout(function() {
    console.log('setTimeout actions.');
}, 0);
 
console.log('other actions.');
 
// 思考一下,当我将setTimeout的延迟时间设置为0时,上面的执行顺序会是什么?

在浏览器中的console中运作试试看,很轻巧就能够知道答案,假若你未有打中答案,那么作者那篇作品就值得您点贰个赞了,因为接下去本身享受的小知识,恐怕会在笔试中国救亡剧团你一命。

在对于进行上下文的牵线中,小编与大家大饱眼福了函数调用栈这种特有数据结构的调用天性。在此间,将会介绍另外三个出奇的队列布局,页面中有着由setTimeout定义的操作,都将位于同三个队列中各种实践。

本身用下图跟大家展示一下队列数据结构的特征。

图片 3

队列:先进先出

而这一个行列施行的大运,必要等待到函数调用栈清空之后才起来实践。即怀有可施行代码实行完结之后,才会起首施行由setTimeout定义的操作。而这几个操作走入队列的一一,则由设定的延迟时间来决定。

之所以在上面这一个例子中,尽管大家将延迟时间设置为0,它定义的操作照旧供给静观其变全数代码实践完结之后才起来推行。这里的延迟时间,并不是相对于setTimeout实行这一阵子,而是相对于另外代码实行完成这一刻。所以地点的例证推行结果就特别轻易明白了。

为了帮扶我们知道,再来叁个结合变量升高的进一步错综复杂的例子。若是您可见科学看出试行顺序,那么你对于函数的执行就有了相比科学的认知了,假使还不能够,就回过头去拜候别的几篇小说。

setTimeout(function() { console.log(a); }, 0); var a = 10; console.log(b); console.log(fn); var b = 20; function fn() { setTimeout(function() { console.log('setTImeout 10ms.'); }, 10); } fn.toString = function() { return 30; } console.log(fn); setTimeout(function() { console.log('setTimeout 20ms.'); }, 20); fn();

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
setTimeout(function() {
    console.log(a);
}, 0);
 
var a = 10;
 
console.log(b);
console.log(fn);
 
var b = 20;
 
function fn() {
    setTimeout(function() {
        console.log('setTImeout 10ms.');
    }, 10);
}
 
fn.toString = function() {
    return 30;
}
 
console.log(fn);
 
setTimeout(function() {
    console.log('setTimeout 20ms.');
}, 20);
 
fn();

图片 4

上栗进行结果

OK,关于setTimeout就有的时候先介绍到那边,大家回过头来看看那多少个循环闭包的考虑题。

JavaScript

for (var i=1; i<=5; i++) { setTimeout( function timer() { console.log(i); }, i*1000 ); }

1
2
3
4
5
for (var i=1; i<=5; i++) {
    setTimeout( function timer() {
        console.log(i);
    }, i*1000 );
}

若是大家直接这样写,依据set提姆eout定义的操作在函数调用栈清空之后才会推行的性状,for循环里定义了5个setTimeout操作。而当这一个操作起来实行时,for循环的i值,已经先一步造成了6。由此输出结果总为6。而大家想要让输出结果依次推行,我们就亟须依据闭包的特色,每一趟循环时,将i值保存在贰个闭包中,当setTimeout中定义的操作实施时,则做客对应闭包保存的i值就能够。

而作者辈明白在函数中闭包判断的轨道,即进行时是或不是在里面定义的函数中访谈了上层成效域的变量。因而大家必要包裹一层自实践函数为闭包的朝四暮三提供条件。

故而,我们只需求2个操作就能够产生难点须求,一是采纳自施行函数提供闭包条件,二是传播i值并保存在闭包中。

JavaScript

for (var i=1; i<=5; i++) { (function(i) { setTimeout( function timer() { console.log(i); }, i*1000 ); })(i) }

1
2
3
4
5
6
7
8
for (var i=1; i<=5; i++) {
 
    (function(i) {
        setTimeout( function timer() {
            console.log(i);
        }, i*1000 );
    })(i)
}

图片 5

采取断点调节和测验,在chrome中查阅试行顺序与每贰个闭包中不一致的i值

理当如此,也足以在setTimeout的第三个参数处选择闭包。

JavaScript

for (var i=1; i<=5; i++) { setTimeout( (function(i) { return function() { console.log(i); } })(i), i*1000 ); }

1
2
3
4
5
6
7
for (var i=1; i<=5; i++) {
    setTimeout( (function(i) {
        return function() {
            console.log(i);
        }
    })(i), i*1000 );
}

1 赞 6 收藏 1 评论

图片 6

原稿参谋

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);
}
}

本文由新萄京娱乐场手机版发布于品牌动态,转载请注明出处:1.事件代理

关键词:

上一篇:没有了

下一篇:没有了