jQuery Callback மற்றும் Chaining பற்றி அறிந்து கொள்ளுங்கள்

jQuery Callback மற்றும் Chaining பற்றி அறிந்து கொள்ளுங்கள்

jQuery-யில் Effects செயல்பாடுகள் வலைப்பக்கங்களில் அனிமேஷன் மற்றும் காட்சியளிப்பு மாற்றங்களைச் செய்ய உதவுகிறது. அதில் Callback Functions மற்றும் Chaining போன்ற அம்சங்கள் நமக்கு எதிர்பார்த்தபடி செயல்களை அமைக்கவும், ஒன்றுக்குப் பிறகு ஒன்றாக நிகழ்ச்சிகளை தொடங்கவும் உதவுகிறது.

Callback Function என்றால் என்ன?

Callback என்பது ஒரு Function ஆகும், அது மற்றொரு Function முடிந்த பிறகு செயல்படும். jQuery-யில், ஒரு Effect செயல்படுவது முடிந்தவுடன் Callback Function ஐ இயக்க அனுமதிக்கின்றது.

Callback Function Example

$(document).ready(function(){
  $("#fadeOutBtn").click(function(){
    $("#myDiv").fadeOut("slow", function(){
      alert("Div has faded out!");
    });
  });
});

இந்த நிரலில், #myDiv பகுதி மெதுவாக மறைந்து காணாமல் போகும். அது முடிந்த பிறகு, alert மூலம் ஒரு செய்தி தோன்றும். இதன் மூலம் பகுதி முழுமையாக மறைந்த பிறகு மட்டுமே Callback Function இயக்கப்படும்.

Chaining (செயல்களை தொடர் முறையில் அமைத்தல்)

jQuery-யில் Chaining என்பது, ஒரு பகுதியின் மீது ஒன்றுக்கு மேற்பட்ட jQuery செயல்களை ஒரே வரியில் இயக்குவது. இதனால், எளிமையான மற்றும் துல்லியமான நிரல்களை எழுத முடியும்.

Chaining Example

$(document).ready(function(){
  $("#chainingBtn").click(function(){
    $("#myDiv").slideUp(1000).slideDown(1000).fadeOut(1000).fadeIn(1000);
  });
});

இந்த நிரலில், #myDiv பகுதி மேலே நழுவி மறையும், பிறகு கீழே நழுவி திரும்பக் காட்சியளிக்கும். அதன்பிறகு, பகுதி மெதுவாக மறையும், திரும்பக் காட்சியளிக்கும். இதை Chaining என்ற ஒரு வரியில் ஒருங்கிணைக்க முடியும்.

Callback மற்றும் Chaining பயன்படுத்துவதன் முக்கியத்துவம்

Callback: உங்கள் Effect-கள் பூர்த்தியாகும் வரை காத்திருந்து, அதன் பிறகு செய்யவேண்டிய செயல்களை அழைக்க Callback Functions உதவுகின்றன. இது சரியான அனிமேஷன் ஒழுங்கை உறுதிசெய்கிறது.
Chaining: பல Effect-க்களை ஒரே வரியில் செயல்படுத்துவதன் மூலம், உங்கள் நிரல் குறுகியதாகவும், படிக்க எளிமையானதாகவும் இருக்கும்.

முழு நிரல் (Complete Code)

<!DOCTYPE html>
<html>
<head>
  <title>jQuery Callback and Chaining Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      // Callback Function Example
      $("#fadeOutBtn").click(function(){
        $("#myDiv").fadeOut("slow", function(){
          alert("Div has faded out!");
        });
      });

      // Chaining Example
      $("#chainingBtn").click(function(){
        $("#myDiv").slideUp(1000).slideDown(1000).fadeOut(1000).fadeIn(1000);
      });
    });
  </script>
  <style>
    #myDiv {
      width: 200px;
      height: 100px;
      background-color: lightblue;
      position: relative;
      margin-top: 20px;
    }
  </style>
</head>
<body>

<h1>jQuery Callback and Chaining Example</h1>

<button id="fadeOutBtn">Fade Out with Callback</button>
<button id="chainingBtn">Effect Chaining</button>

<div id="myDiv"></div>

</body>
</html>

Callback Function Example விளக்கம்

இங்கு, fadeOut இயங்கும்போது, #myDiv பகுதியின் மறைவு முழுமையாகக் காட்சியளிக்கிறது. அதன்பிறகு, Callback Function இயங்கும்போது, எச்சரிக்கை செய்தி தோன்றும். இதன் மூலம் நிகழ்ச்சி தொடர் சரியாக செயல்படுகின்றது.

Chaining Example விளக்கம்

Chaining மூலம், பகுதியின் மேல் பல அனிமேஷன் செயல்களை ஒரே வரியில் செய்வது இங்கு காட்டப்பட்டுள்ளது. slideUp(), slideDown(), fadeOut(), மற்றும் fadeIn() ஆகியவை ஒரே வரியில் தொடர்ச்சியாக செயல்படும்.

முடிவு

jQuery-யின் Callback மற்றும் Chaining போன்ற அம்சங்கள், வலைப்பக்கங்களில் அதிரடியாக மற்றும் ஒழுங்குபடுத்தப்பட்ட அனிமேஷன் செயல்களை உருவாக்க எளிமையாக உதவுகின்றன. Callback Functions நிகழ்வுகள் முடிந்த பிறகு கூடுதல் செயல்பாடுகளைச் செய்ய உதவுகிறது, மற்றும் Chaining செயல்பாடு பல Effect-களை ஒரே வரியில் எளிமையாகப் பயன்படுத்த அனுமதிக்கிறது.