SP.SOD how to use correctly?

Question

SP.SOD is a nice feature of SharePoint, but how should I use it? For example, I use these lines of code

ExecuteOrDelayUntilScriptLoaded(function () {
   //code
}, "custom.js");

If I understand correctly this code will be invoked when custom.js is loaded. There are several functions that can load this script. For example

SP.SOD.executeFunc('custom.js', null, callbackfunction)

What the best practice to use SP.SOD.executeFunc and ExecuteOrDelayUntilScriptLoaded together?

Answer 1

This code is the basic implementation of LoadSodByKey, this is the best implementation of the function as it has the override to allow you to have a callback for when the script is loaded.

After jquery is loaded, the anonymous function will write "Hello World" to the console

<script type="text/javascript">
   LoadSodByKey("js/jquery-1.9.0.min.js", function () {
       console.log("Hello world!")
   });
</script>

If you are using SP2013 then you will want to look into jquery.livequery which is a plugin.

This will allow you to look for changes that happen on the page, dynamically applying styles to newly created elements.

These are my thus far best practices for loading and using scripts.

Answer 2

SP.SOD.executeFunc works with OnDemand scripts while ExecuteOrDelayUntilScriptLoaded does not.

Here is an excellent resource on SP.SOD:

http://www.ilovesharepoint.com/2010/08/sharepoint-scripts-on-demand-spsod.html

ExecuteOrDelayUntilScriptLoaded(func, scriptName) schedules an asynchronous callback function (func) which will be called when the script has signaled finished loading. Signaled finished loading means that the script has called notifyScriptLoadedAndExecuteWaitingJobs(scriptName). All SharePoint built-in scripts will call notifyScriptLoadedAndExecuteWaitingJobs when they have finished loading. ExcuteOrDelayUntilScriptLoaded does not trigger loading an on demand script (SOD)!

SP.SOD.executeFunc(key, functionName, fn) is used to load on demand scripts (ScriptLink.OnDemand=true). The “key” parameter must match to the ScriptLink’s Name property (Use small letters for key, because an issue with string normalizing in RegisterSodDep)