Global variables getting updated?

JavaScript
1

Bare with me here, as actual code isn’t super important. You can use this pseudo code as reference:

//couple of global variables at the top of a file (ultimately imported / compiled with babel into a main.js file)
ImportantObject = {
  //init function which calls slideshow1 function
  //slideshow1 function here where it references the global variables
}

There are times when the DOM changes and as a result, we call the slideshow1 function because we need to reset the HTML / create the slideshow, etc. However, since the variables in use are defined at the top of the file, they don’t get updated when we re-run slideshow1

  1. Any downsides to moving the variables to inside of slideshow1.js BESIDES limiting the scope (and if multiple functions exist, like slideshow2/slideshow3, it’d need to be defined in each function
  2. Is there a workaround here or some way to get the variables to update?
2

Is slideshow1 supposed to update the variables? What is updating the variables? If slideshow1 needs new variables, slideshow1 should be creating (or updating) the variables…

3

Slideshow1 needs the global variables updated because the content in the DOM has changed and isn’t reflective of what the DOM now has. We’re dynamically loading in content basically and the cached global variables just don’t recognize that (obviously). Putting those variables in the inner function corrects this since when we re-run that inner function (slideshow), the variables get re-run. Does that help?

4

I may well have the wrong end of the stick, but would closures be a solution?

Using a counter just as an example.

globalCount = 0;

function createFoo (counter) {
  // function returned with 'counter' in a closure (it's own private bundle)
  return function foo () {
    counter += 1; // modified each time the function is called
    
  }
}

// pass in globalCount's value to createFoo
// createFoo's inner function assigned to baz along with closure
const baz = createFoo(globalCount);

baz() // counter = 1
baz() // counter = 2 etc
1 Like
5

So, our variables are jquery objects, such as var x = $(".thing")

So, i’d just need to return the original value?

var thing = $(".thing");

function updateThing(thingy) {
  return function() {
    thingy= $(".thing")
    
  }
}

const baz = updateThing(thing);

baz() // counter = 1
baz() // counter = 2 etc

I haven’t tested, but this would recognize new $(".thing")'s that are out in the DOM?

6

It’s hard for me to answer this without a better understanding of the whole code, what you are working with and what you are trying to achieve.

Do you have any control over the what is being imported/compiled? If so, wouldn’t the selector string be more useful than the Jquery object? Is the selector and it’s target element a constant, regardless of DOM changes?

// globals
const importedSelector1 = '.thing'
const importedSelector2 = '.thing2'

function updateSlideshow(selector) {
    thingy = $(selector)
    .... update slideShow etc
}

updateSlideshow(importedThing1)

Apparently Jquery in the past did make the selector string available, but it has since been depreciated

const foo = $('.thing')
const baz = $(foo).selector // '.thing'

Again, I may not have understood what you are trying to achieve here.

7

No, that’s actually brilliant. Our config file is all jquery objects so it’s just the pattern that I’m used to working with. Just a brain fart :slight_smile: . I think this might be the trick. Thank you.

1 Like