javascript和空返回对象中的匿名函数

Question

Below is the source code for a function that preloads images onto a page, the author has added in some comments to explain how the code works, but I still do not fully understand all of it. to be specific, He claims that the return value of this function is an empty object with a "done()" method that calls the predefined anonymous function, "postaction()". Is the user of this code supposed to enter his/her own code into the empty postaction function on line 2? If that's how it works, then what does "postaction=f || postaction" in the return object do?

Source code:

function preloadimages(arr){
  var newimages=[], loadedimages=0
  var postaction=function(){}
  var arr=(typeof arr!="object")? [arr] : arr
  function imageloadpost(){
      loadedimages++
      if (loadedimages==arr.length){
          postaction(newimages) //call postaction and pass in newimages array as parameter
      }
  }
  for (var i=0; i<arr.length; i++){
      newimages[i]=new Image()
      newimages[i].src=arr[i]
      newimages[i].onload=function(){
          imageloadpost()
      }
      newimages[i].onerror=function(){
        imageloadpost()
      }
  }
  return { //return blank object with done() method
      done:function(f){
          postaction=f || postaction 
          //remember user defined callback functions to be  called when images load
    }
  }
}

link to author's page:http://www.javascriptkit.com/javatutors/preloadimagesplus.shtml

Answer 1

You can enter your own function for postaction, although it's not a callback function like you might expect.

However, it returns an object with a done function in it.

If you do soth. like

 preloadimages().done(function () {
     console.log('done')
 });

your function will be executed. If you don't provide the fnction as a parameter of done, the default postaction will be called and do nothing, since it is an empty function

Answer 2

From reading that code, it looks like you're not meant to redefine postaction() - in fact, you shouldn't have to modify any of this code at all. You are actually expected to pass a function as an argument to the done() function, which will be called later on successful image load (a 'callback' function).

This line:

postaction=f || postaction

means "assign the value of f to postaction if f has a value, otherwise assign postaction to itself" (ie. don't change it).

Answer 3

I don't know what exactly this code is used for, but the returned object has a function done which can be used with or without function parameter.

Within done, this statement

f || postaction

Meaning f OR postaction returns f if f is not null/undefined or postaction else, so if you call

myreturnObject.done();

this evaluates to

postaction = postaction

because f is not define. If you call

myreturnObject.done(function(newImages) { ... });

this evaluates to

postaction = f.

Postaction is then used within the for loop in the imageLoadPost function. If you want some own coding there, you can pass it to the done method as parameter as shown. If you do not need any additional coding there, do not pass an function to postaction. The empty postaction function defined as fallback will be called then.