נגישות       נגישות
שינוי גודל טקסט:
א א א
שינוי צבעי האתר:
? מקשי קיצור:

לחיצה חוזרת ונשנית על המקש Tab תעביר אתכם בין הקישורים והאזורים השונים בעמוד.

הפעלת מקשי הקיצור תלויה בדפדפן שבו אתם משתמשים.

Internet Explorer, Chrome ובגרסאות ישנות של Firefox: לחצו על מקש Alt ועל מקש המספר או האות על-פי הרשימה. ב Firefox 3 ומעלה: לחצו על המקשים Alt + Shift + המספר או האות.

S - עבור לתוכן הדף
L - חיפוש
1- עמוד הבית
2 - פרוייקטים
3 - מדריכים
4 - אודות
5 - צרו קשר
6 - הצהרת נגישות
 

העברת פונקציות כארגומנטים לפונקציות ב-JS

מחבר:
בתאריך:

ל-Javascript יש תכונות מופלאות, שאחת מהן היא שניתן להעביר פונקציה בתור ארגומנט לפונקציה אחרת . במדריך זה נדגים את התכונה הזו, וגם נראה את ההשלכות שיש לתכונה על כתיבת javascript ו-jQuery באופן מסודר ומובן יותר.

בוא נראה דוגמה לפונקציה פשוטה של JS. בדוגמה, פונקציה שמחברת שני ארגומנטים, ומציגה את התוצאה בקונסולה.

function add(f,s){
   console.log(f+s);
}
  
add(1,2);

כפי שניתן להעביר ארגומנטים רגילים, ניתן להעביר פונקציה כארגומנט . בדוגמה זו, נעביר פונקציית callback כארגומנט.

function add(f,s,callback){
  console.log(f+s);
}
 
add(1,2,function(){
  console.log('callback');
}
);

זה לא מספיק להעביר את הפונקציה, צריך גם לקרוא לה.

function add(f,s,callback){
  console.log(f+s);
  callback();
}
  
add(1,2,function(){
  console.log('callback');
});

והתוצאה היא שפונקציה ה-callback תרוץ בסוף. כפי שניתן לראות בקונסולה:

קונסולה שמדגימה פונקציית callback ב-javascript שמועברת כארגומנט

בשביל הסדר, ניתן להפריד את פונקציית ה-callback, ולהעביר אותה כארגומנט בלבד. לדוגמה:

function add(f,s,callback){
  console.log(f+s);
  callback();
}
  
function after(){
  console.log('after');
}

  
add(1,2,after);

וזו התוצאה:

קונסולה שמדגימה פונקציית callback ב-javascript שמועברת כארגומנט

ניתן להעביר את פונקציית ה-callback כארגומנט אופציונלי, אם עוטפים את הקריאה לפונקציה בתנאי:

function add(f,s,callback){
  console.log(f+s);
  if(callback){
    callback();
  }
}
  
function after(){
  console.log('after');
}
  
add(1,2,after);

זו גם דרך מסודרת יותר לכתוב jQuery, על ידי העברת פונקציית ה-callback כארגומנט:

(function($){
  function clickHandle(e){
    e.preventDefault();
    alert('clicked');
  }
  
  $('#btn').on('click',clickHandle);
}(jQuery));

לכל מדריכי ה-javascript

 

 

הוסף תגובה חדשה

 

= 8 + 3