撩课-Web大前端每天5道面试题-Day28

时间：2022-12-15 19:15:51

1.用setTimeout()方法来模拟setInterval()与setInterval()之间的什么区别？

首先来看setInterval的缺陷，使用setInterval()创建的定时器确保了定时器代码规则地插入队列中。
这个问题在于：
如果定时器代码在代码再次添加到队列之前还没完成执行，
结果就会导致定时器代码连续运行好几次。
而之间没有间隔。

不过幸运的是：
javascript引擎足够聪明，能够避免这个问题。
当且仅当没有该定时器的如何代码实例时，
才会将定时器代码添加到队列中。
这确保了定时器代码加入队列中最小的时间间隔为指定时间。

这种重复定时器的规则有两个问题：
1.某些间隔会被跳过 
2.多个定时器的代码执行时间可能会比预期小。

下面举例子说明：
假设，某个onclick事件处理程序使用啦setInterval()来设置了一个200ms的重复定时器。
如果事件处理程序花了300ms多一点的时间完成。

 

 示意图如下:
撩课-Web大前端每天5道面试题-Day28 
这个例子中的第一个定时器是在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服务器通过会话密钥加密与客户端之间的通信。

 

标签：

相关文章