1.用setTimeout()方法来模拟setInterval()与setInterval()之间的什么区别?
首先来看setInterval的缺陷,使用setInterval()创建的定时器确保了定时器代码规则地插入队列中。
这个问题在于:
如果定时器代码在代码再次添加到队列之前还没完成执行,
结果就会导致定时器代码连续运行好几次。
而之间没有间隔。
不过幸运的是:
javascript引擎足够聪明,能够避免这个问题。
当且仅当没有该定时器的如何代码实例时,
才会将定时器代码添加到队列中。
这确保了定时器代码加入队列中最小的时间间隔为指定时间。
这种重复定时器的规则有两个问题:
1.某些间隔会被跳过
2.多个定时器的代码执行时间可能会比预期小。
下面举例子说明:
假设,某个onclick事件处理程序使用啦setInterval()来设置了一个200ms的重复定时器。
如果事件处理程序花了300ms多一点的时间完成。
示意图如下:
复制代码
这个例子中的第一个定时器是在205ms处添加到队列中,
但是要过300ms才能执行。
在405ms又添加了一个副本。
在一个间隔,605ms处,第一个定时器代码还在执行中,
而且队列中已经有了一个定时器实例,
结果是605ms的定时器代码不会添加到队列中。
结果是在5ms处添加的定时器代码执行结束后,
405处的代码立即执行。
function say(){
//something
setTimeout(say,200);
}
setTimeout(say,200)
或者
setTimeout(function(){
//do something
setTimeout(arguments.callee,200);
},200);
复制代码
2..js怎么控制一次加载一张图片,加载完后再加载下一张?
(1)方法1
<script type="text/javascript">
var obj=new Image();
obj.src="https://dwz.cn/jbVvWYJr";
obj.onload=function(){
alert('图片的宽度为:'+obj.width+';图片的高度为:'+obj.height);
document.getElementById("mypic").innnerHTML="<img src='"+this.src+"' />";
}
</script>
<div id="mypic">onloading……</div>
(2)方法2
<script type="text/javascript">
var obj=new Image();
obj.src="https://dwz.cn/jbVvWYJr";
obj.onreadystatechange=function(){
if(this.readyState=="complete"){
alert('图片的宽度为:'+obj.width+';图片的高度为:'+obj.height);
document.getElementById("mypic").innnerHTML="<img src='"+this.src+"' />";
}
}
</script>
<div id="mypic">onloading……</div>
复制代码
3.简单实现Node的Events模块?
简介:
观察者模式或者说订阅模式,
它定义了对象间的一种一对多的关系,
让多个观察者对象同时监听某一个主题对象,
当一个对象发生改变时,
所有依赖于它的对象都将得到通知。
node中的Events模块就是通过观察者模式来实现的:
var events=require('events');
var eventEmitter=new events.EventEmitter();
eventEmitter.on('say',function(name){
console.log('Hello',name);
})
eventEmitter.emit('say','Jony yu');
这样,eventEmitter发出say事件,
通过On接收,并且输出结果,
这就是一个订阅模式的实现,
下面我们来简单的实现一个Events模块的EventEmitter。
(1)实现简单的Event模块的emit和on方法
function Events(){
this.on=function(eventName,callBack){
if(!this.handles){
this.handles={};
}
if(!this.handles[eventName]){
this.handles[eventName]=[];
}
this.handles[eventName].push(callBack);
}
this.emit=function(eventName,obj){
if(this.handles[eventName]){
for(var i=0;o<this.handles[eventName].length;i++){
this.handles[eventName][i](obj);
}
}
}
return this;
}
这样我们就定义了Events,
现在我们可以开始来调用:
var events=new Events();
events.on('say',function(name){
console.log('Hello',nama)
});
events.emit('say','Jony yu');
//结果就是通过emit调用之后,输出了Jony yu
(2)每个对象是独立的
因为是通过new的方式,每次生成的对象都是不相同的,因此:
var event1=new Events();
var event2=new Events();
event1.on('say',function(){
console.log('Jony event1');
});
event2.on('say',function(){
console.log('Jony event2');
})
event1.emit('say');
event2.emit('say');
//event1、event2之间的事件监听互相不影响
//输出结果为'Jony event1' 'Jony event2'
复制代码
4.箭头函数中this指向举例?
var a=11;
function test2(){
this.a=22;
let b=()=>{console.log(this.a)}
b();
}
var x=new test2();
//输出22
复制代码
5.https协议的工作原理?
客户端在使用HTTPS方式与Web服务器通信时有以下几个步骤:
客户使用https url访问服务器,则要求web 服务器建立ssl链接。
web服务器接收到客户端的请求之后,会将网站的证书(证书中包含了公钥),
返回或者说传输给客户端。
客户端和web服务器端开始协商SSL链接的安全等级,也就是加密等级。
客户端浏览器通过双方协商一致的安全等级,建立会话密钥,
然后通过网站的公钥来加密会话密钥,并传送给网站。
web服务器通过自己的私钥解密出会话密钥。
web服务器通过会话密钥加密与客户端之间的通信。
复制代码