js回調函數(callback)

時間 2021-01-30

標籤 javascript html java jquery ide 函數學習網站 google spa 欄目 JavaScript 简体版

原文原文鏈接

Mark!javascript

js學習html

不喜歡js，可是喜歡jquery，不解釋。java

自學jquery的時候，看到一英文詞（Callback），頓時背部隱隱冒冷汗。迅速google之，發現原來中文翻譯成回調。也就是回調函數了。不懂啊，因而在google回調函數，發現網上的中文解釋實在是太「深奧」了，我認可本身才疏學淺了。看了幾個回調的例子後，貌似有點理解了。下面是我對回調函數的理解，要是理解錯了，請指正，不甚感激。jquery

首先仍是從jquery網站上的英文定義入手，身爲國人，我真感到悲劇。一個回調的定義被國內的「高手」解釋成什麼樣，就在那繞圈子，貌似只有把你繞進去了，他纔算高手。浮雲，一切都是浮雲。ide

A callback is a function that is passed as an argument to another function and is executed after its parent function has completed.函數

這是js裏的解釋了，其餘語言的算我沒說。學習

字面上理解下來就是，回調就是一個函數的調用過程。那麼就從理解這個調用過程開始吧。函數a有一個參數，這個參數是個函數b，當函數a執行完之後執行函數b。那麼這個過程就叫回調。網站

其實中文也很好理解：回調，回調，就是回頭調用的意思。函數a的事先幹完，回頭再調用函數b。google

舉個現實的例子：約會結束後你送你女友回家，離別時，你確定會說：「到家了給我發條信息，我很擔憂你。」對不，而後你女友回家之後還真給你發了條信息。小夥子，你有戲了。spa

其實這就是一個回調的過程。你留了個函數b（要求女友給你發條信息）給你女友，而後你女友回家，回家的動做是函數a。她必須先回到家之後，函數a的內容執行完了，再執行函數b，而後你就收到一條信息了。

這裏必須清楚一點：函數b是你以參數形式傳給函數a的，那麼函數b就叫回調函數。

也許有人有疑問了:必定要以參數形式傳過去嗎，我不能夠直接在函數a裏面調用函數b嗎？確實能夠。求解中。

<解惑:若是你直接在函數a裏調用的話，那麼這個回調函數就被限制死了。可是使用函數作參數就有下面的好處：當你a(b)的時候函數b就成了回調函數，而你還能夠a(c)這個時候，函數c就成了回調函數。若是你寫成了function a(){...;b();}就失去了變量的靈活性。>

下面用代碼來證明個人理解。

  
  
           
  
  
   
   
            
   
   <html> 
   
   
            
   
    
   
   
            
   
   <head> 
   
   
            
   
    
   
   
            
   
   <title>回調函數(callback)</title> 
   
   
            
   
   <script language="javascript" type="text/javascript"> 
   
   
            
   
   function a(callback) 
   
   
            
   
   {    
   
   
            
   
       alert("我是parent函數a！"); 
   
   
            
   
       alert("調用回調函數"); 
   
   
            
   
       callback(); 
   
   
            
   
   } 
   
   
            
   
   function b(){ 
   
   
            
   
   alert("我是回調函數b"); 
   
   
            
   
    
   
   
            
   
   } 
   
   
            
   
   function c(){ 
   
   
            
   
   alert("我是回調函數c"); 
   
   
            
   
    
   
   
            
   
   } 
   
   
            
   
    
   
   
            
   
   function test() 
   
   
            
   
   { 
   
   
            
   
       a(b); 
   
   
            
   
      a(c); 
   
   
            
   
   } 
   
   
            
   
    
   
   
            
   
   </script> 
   
   
            
   
   </head> 
   
   
            
   
    
   
   
            
   
   <body> 
   
   
            
   
   <h1>學習js回調函數</h1> 
   
   
            
   
   <button onClick=test()>click me</button> 
   
   
            
   
   <p>應該能看到調用了兩個回調函數</p> 
   
   
            
   
   </body> 
   
   
            
   
    
   
   
            
   
   </html>