Question 11177 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Triggering a function that lives inside jQuery $(document).ready outside of it?

Been googling and looking for an answer to this / best practice.

Let’s say you have most of your javascript inside $(document).ready() for whatever reason, and inside there you have a function that you want to "fire" based on some external javascript function..

What would be the best way to do that? Simply moving the function to the global space isn’t entirely a feasible option due to all the variables and stuff inside $(document).ready()

So in this example, there’s external javascript that does an ajax request, so when the request is completed, data get’s loaded on the page, and then I want to somehow be able to fire that function inside $(document).ready() when that external javascript ajax completes, but I can’t simply call that function due to it not being in the global space.

Tags:

2

Answers


  1. 0

    you can use a setter to cast there:

    let ready = false
const observe = {}
function run(name, ...args) {
  if (observe[name]) observe[name](...args)
  else {
    let fn
    Object.defineProperty(observe, name, {
      get() {
        return fn
      },
      set(fnL) {
        fn = fnL
        fnL(...args)
      }
    })
  }
}
function set(name, fn) {
  observe[name] = fn
}

$(document).ready(() => {
  ready = true

  const textEl = $("#text")

  function setText(text) {
    textEl.text(text)
  }

  set('setText', setText)
})

run('setText', 'first run')

setTimeout(() => run('setText', 'delayed 2s'), 2000)
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="text">no thing</div>

    this is quite powerful if you call the function before $().ready has completed it will wait until $().ready runs. and if $().ready is already running it will call the function too

    Usage

    in $().ready you have to call set('<function name>', <function>) and when you want to call the function run run('<function name>', ...<argumentts> )

    or simpler way you remove $().ready and type <script> at the end of <body> it will work

    Login or Signup to reply.
  2. 0

    If you do not want to expose a global then you can make an event that the code has to trigger which will inform when it is done.

    $(function () {
  function myLocalFunction (e, data) {
    console.log('called', data);
  }

  $(document).on("loadedTheStuff", myLocalFunction);

});


window.setTimeout(function () {
   $(document).trigger("loadedTheStuff", "Hello!");
}, 300);
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search