Question about callback functions

I have a pretty straightforward palindrome word test scriiiipt which seems to work perfect
http://fixmysite.us/Web_Programming_With_Javascriipt/Assignment6/
Heres the script im using

//prevent the page from resetting when the form is submitted
document.getElementById("palindome").addEventListener("submit", function(event){
 event.preventDefault();
});

function checkInput() {	

var word = [];

var input = document.getElementById('input').value;

//take out any spaces on left or right side of input
input = input.trim();

if(input.length >  10) { 
 alert('Your word cannot be longer than 10 characters');
 location.reload();
} else { 
 //create an array & put each caracter into it
 var wordArray = input.split(""); 
 //call function to creater new []
 var revArray = reverseArr(wordArray);

 //make the new [] into a word
 var solution = revArray.join();

 //remove all ,s using regular expressions 
 solution = solution.replace(/\,/g,"");
 //see if the word is a palindome
 if(input ==  solution)
	document.getElementById('result').innerHTML = '<p><img src="images/winner.png"></p><h2 id="winner">The word ('+input+') is a palindome.</h2>';
 else
  	document.getElementById('result').innerHTML = '<p><img src="images/loser.png"></p><h2 id="loser">The word ('+input+') is NOT a palindrome</h2>';
 }
}

function reverseArr(input) {
var ret = new Array;
for(var i = input.length-1; i >= 0; i--) {
    ret.push(input[i]);
}
return ret;
}

The assitgnment was to make sure you use a callback function and am sort of confused as to what that is.
It seems like its simply a function that runs only when needed,
I though the preventDefault() would be one as its only run when the form is submitted. But just to be sure I want to make my call to the reverseArr function a callback
I thought I dso that like

var revArray = (function(wordArray) {
var ret = [];
   for(var i = wordArray.length - 1; i >=0; i--)
   ret.push(wordArray[i];
  }
return ret;
});

is that right?

A callback function is a function you’re passing to another function as an argument, like:

var addOne = function(number, callback) {
    var result = number + 1;

    // Call the callback function, passing the result
    callback(result);
};

// Usage:
addOne(3, function(result) {

    // Logs "4"
    console.log(result);
});

One primary reason for this is that following code can get executed asynchronously while the data are processed. If you would simply return the result, the following code would have to wait until the result arrived. This makes sense for server requests for example, which can take a while… another good example would be the window.setTimeout() method – if you wouldn’t pass a callback function, everything would halt until the given time elapsed.

A callback function is one that is passed to another function as a parameter so that the function it is passed to can call it at the appropriate time.

Many of JavaScript’s built in functions take functions as parameters so that those functions can be called when required.

For example the addEventListener function takes a callback function as the second parameter to identify what function should be run when the event identified by the first parameter is triggered. So in the following code you have an anonymous callback function specified.

document.getElementById("palindome").addEventListener("submit", function(event){
 event.preventDefault();
});

To make reverseArr a callback function you need to replace the call to it within the checkInout function with a variable name that gets passed into checkInput as a parameter.

function checkInput(callback) {
...
var revArray = callback(wordArray);

then pass the rfunction as a parameter when calling checkInput(reverseArr)

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.