ExcuteQueryAsync functions inconvenient

Question

Can any body explain this ?

clientContext.executeQueryAsync(
Function.createDelegate(this, this.onQuerySucceeded),
Function.createDelegate(this, this.onQueryFailed));

it always output an Error in on MSDN site sure i've something wrong it worked when i replaced with the functions like

clientContext.executeQueryAsync(function(sender,args){...},function(sender,args){...});

can anybody tell why ? and whats "createDelegate" ? and whats "this" ?

https://onedrive.live.com/redir?resid=EA9AE801B5328F18!1627&authkey=!APlXsyQQR9a-DJI&v=3&ithint=photo%2cPNG the error

Copied code from PastBin

getAllFilesInFolders("galleroma")
function getAllFilesInFolders(listName) {
    var images = [];
var clientContext = SP.ClientContext.get_current();
var lists = clientContext.get_web().get_lists();
var oList = clientContext.get_web().get_lists().getByTitle(listName);
var collListItem;
    //SP.CamlQuery.createAllItemsQuery()
var camlQuery = SP.CamlQuery.createAllItemsQuery();

 var query = SP.CamlQuery.createAllItemsQuery();
   // camlQuery.set_folderServerRelativeUrl("/"+ListName+"/"+Folder);



collListItem = oList.getItems(camlQuery);
clientContext.load(oList);
clientContext.load(collListItem, 'Include(File, FileSystemObjectType)');

 clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
    function onQuerySucceeded(sender, args) {
       var listItemEnumerator = collListItem.getEnumerator();
    while(listItemEnumerator.moveNext())
    {
        var currentItem = listItemEnumerator.get_current();                                                                                                                    
        if(currentItem.get_fileSystemObjectType() == "0")
        {
            var file = currentItem.get_file();
            if(file != null)
            {
                //console.log('File Name: ' + file.get_name() + '\n' + 'File Url: ' + file.get_serverRelativeUrl());
                images.push(file.get_serverRelativeUrl());

            }



        }

    }  

                    console.log(images);


    }

    function onQueryFailed(sender, args) {
        alert('Error getting list items: ' + args.get_message());
    }


}

it worked only like this

Function.createDelegate(this, onQuerySucceeded)

Answer 1

JavaScript has objects and functions.

this is attached to functions. When you invoke a function this get initialized differently based on how it is invoked.

Below code is the typical pattern used in MSDN

<script type="text/javascript">
function StartFunction()
{
    var web = clientContext.get_web();
    var listCollection = web.get_lists();
    ...
    clientContext.load(..);
    clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
  }
}

function onQueryFailed(sender, args) {
  //show error message ()stacktrace
  alert('Request failed. ' + args.get_message() + 'n' + args.get_stackTrace());
}

function onQuerySucceeded() {
    //show successful message
    alert('Done!');
}
</script>

Function.createDelegate creates a delegate function that retains the context first used during an objects creation. The createDelegate function is useful when setting up an event handler to point to an object method that must use the this pointer within its scope.

Answer 2

There are two ways to call executeQueryAsync in JSOM:

context.executeQueryAsync(
Function.createDelegate(this, _onSucceed), 
Function.createDelegate(this, _onFail)
);

and

context.executeQueryAsync(_onSucceed, _onFail);

The difference between the two is

the former allows you to override what the value of the "this" variable will be inside the function. In the latter case, not using Function.createDelegate, when you are inside either the _onSucceed or _onFail callbacks, this will reference the callback function itself – onSucceed or onFail respectively.

For more details visit this link from where I copied the above information. But basically creating delegate sets the value of this in callback functions. Hope it helps.

Answer 3

Apart from the explanation given by Amal, the reason you see error is var collListItem; is defined in getAllFilesInFolders function and the onQuerySucceeded method doesn't have its information unless you use this.collListItem which is passed during Function.createDelegate(this, this.onQuerySucceeded). Else you should define var collListItem; globally in order to use it as you are doing correctly.

UPDATE

If you were to use clientContext.executeQueryAsync(onQuerySucceeded, onQueryFailed);, then the variable collListItem will need to be declared globally as onQuerySucceeded doen't have any context about it. Also using this.collListItem will not be helpful as this doesn't represent the function getAllFilesInFolders where collListItem is declared. However, when you use

clientContext.executeQueryAsync(
    Function.createDelegate(this, this.onQuerySucceeded),
    Function.createDelegate(this, this.onQueryFailed));

In the onQuerySucceeded, you can use this.collListItem as this now represents getAllFilesInFolders object which is passed as the first parameter in Function.createDelegate