撩課-Web大前端每天5道面試題-Day28
阿新 • • 發佈:2019-01-07
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伺服器通過會話金鑰加密與客戶端之間的通訊。