Cancel previous call of a function?

JavaScript
#1

I have a function which is called like so

$variable.accessibility_menu();

That function does a lot of things; modifying HTML elements, controlling tab order dynamically (via tabindex). This means that all the anchors are thrown into an array and I manually am moving the focus depending on the user tabbing, shift tabbing, or arrows.

The problem I have is that there are some cases where the plugin is called twice, and there’s nothing I can do about this. The solution here must be to somehow recognize the plugin has already ran once, somehow destroy all aspects of it, and let it re-run. How can I accomplish this? Do you need more information on the plugin? Thanks :slight_smile: .

#2

Would it be more appropriate for the function to recognise that it has already been run, and to refuse to run again?

#3

Sorry, it would not be. I could explain in detail, but you’ll have to trust me that we need the 2nd function to overwrite the first. Right now, running it twice causes slightly weird bugs.

#4

In that case I strongly recommend starting with some tests, for the expected behaviour of that function.

Those tests can help to more closely ferret out unexpected behaviour on subsequent runs.

#5

The problem ultimately lies with the fact that our plugin has 2 options.

Let me back up and explain the function real fast. It works to make meganavs accessible. It takes 2 areas of a meganav; the description area (can hold links) and the <ul> link section (level2). This obviously has links.

The first call to the plugin adds all the links into an array based on using all the level2 links, and then description area links. Then, based on the order of the links added to the array, they get tabindex when the meganav is open on that menu item.

The issue arises on the 2nd plugin call, if they switch the order from level2 + description, to description + level2. If I just call the plugin twice, it’s no issue. It’s a niche case which I assume comes from the array I create and pushes the code into it.

#6

https://cod ere po.de mo.fi nals ite.com/me nu-bug

This shows the bug (only go to the main nav area at the top).

The 2 bugs are:

  1. If you are in a level2 link, and hit the right arrow, it should take you to the next main nav item. It skips you over 1 more than it should
  2. Tabbing to the end of the menu traps you at the end. I can show a video if you can’t replicate.
#7

That was my first thought. A ‘once’ wrapper.

Maybe a naive implementation, but I guess it could be amended

const firstTime = (fn1, fn2) => {
  let previous = false
  return (...args) => {
    if (!previous) {
      previous = true
      fn1(...args)
    } else {
      fn2(...args)
    }
  }
}


const greeting = firstTime(
  (name) => console.log(`Hello ${name}`),
  (name) => console.log(`Goodbye ${name}`)
)

greeting('Bob') // Hello Bob
greeting('Bob') // Goodbye Bob
greeting('Bob') // Goodbye Bob

or in your case

const accessibiltyMenu = firstTime(
  $variable.accessibility_menu.bind($variable),
  // variant of function with cleanup here
)

I guess probably best to fix the underlying problem though — a bit of a sticking plaster fix.

1 Like