Getter/ Setter on Click jquery

Question

Is there a way to replace this timeout with a getter/ setter. I need the images in the filter gallery to sort accordingly by waiting to find out what the globalVariable is when a user clicks on a section.

Right now, I use a timeout, which doesn't work after one click. Here is one question I looked at, but I'm still having a hard time wrapping my head around it. Here is the codepen. What would be the best approach to achieve this?

Part of the Code: /* Generate all items on "All" then on click generate the ones that match the globalVariable */

$grid.revealItems(GenerateItems(8));

/*This click function doesn't repeat, which means no more items load after second click*/
var variableSet = document.getElementById("filterList");
variableSet.addEventListener('click', runFunction);

function runFunction(){setTimeout (function(){
$grid.revealItems(GenerateItems(4));
}, 1000)}

 /* Filter on Click */
  $(document).on("click", ".filter-item", function clickFilter() {
    $(".filter-item.active").removeClass("active");
    $(this).addClass("active");
    var f = $(this).data("f");
    //Global Variable 
    globalVariable = $(this).attr('name');

Hi @Bergi, right now the while loop runs before the click function, so I need the "if (globalVariable = "ImsName") continue;" to wait until the globalVariable has a value. Does that help? — Elizabeth, Oct 13 '19 at 16:05
You have not shown where `GenerateItems()` is called, can you add that please? — Bergi, Oct 13 '19 at 16:06
Btw if you want to loop to wait for the click, you should put the `await` in the loop! — Bergi, Oct 13 '19 at 16:07
Here's a link to the codepen, which has all the code https://codepen.io/MakaylaElizabeth/pen/QWLYqRp?editors=1011 — Elizabeth, Oct 13 '19 at 16:18
No, that's a syntax error. You need to `await` a promise. You will probably want to make the `globalVariable` a promise, and fulfill it from the click handler. — Bergi, Oct 13 '19 at 17:19
Is this on the right track? I've read a couple of articles and it's still a little lost on me. — Elizabeth, Oct 13 '19 at 18:42

score 0 · Answer 1 · answered Oct 13 '19 at 18:41

0

Any function that utilizes the async/await feature needs to include 'async' infront of the function definition and 'await' in front of the function call.

async function GenerateItems(max){

Also, i'm not sure what this is used for, you may need to further elaborate. In the code below, 'await' should be in front of an API call or some kind of function call that responds with a callback or promise. This doesn't seem to be doing either.

await if (globalVariable != "ImgsName") continue;

Here is an example of an async await code block:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

Hope this helps, maybe elaborate on what you're trying to do in the await line so we can further support you.

answered Oct 13 '19 at 18:41

Speros

361
2
4
10

Hi @Speros, I think that I'm a little confused what function to focus on and the correct syntax. I want the while loop inside GenerateItems to wait until the globalVariable contains a value from the clickFunction, so it can be used in the if statement. Because right now, globalVariable is undefined. I'm hoping with async/ await, there's a way to make sure the globalVariable has a value before the while loop is executed. – Elizabeth Oct 13 '19 at 18:57
Got it, I think you should think of it a little differently. Instead of starting a 'while' loop right away, you can put the while loop in its own function, say we call it 'startLoop()' and you only call that 'startLoop()' function when your variable has been set. ... – Speros Oct 13 '19 at 19:22
... Now, you can focus on adding a setter and getter on your variable... https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters ...so once your variable has been set, you can trigger your 'startLoop()' function and ensure the 'startLoop()' function only run when that variable is set to a value. Basically, you should rely on an event listener for the variable being set and triggered, and then kick off the while loop upon the listener being triggered. – Speros Oct 13 '19 at 19:22
...Note that I think the variable you are setting might need to be an object for this to work, it can be a simple object, but I don't think you can add a setter/getter on a primitive type in JS or any language for that matter, but I haven't researched that to be certain. Though I know you can do this with an object that holds a key to the value you seek to add to it. – Speros Oct 13 '19 at 19:24
@Elizabeth I hope the above comments help, ping me if you need more clarification or when you get it working. – Speros Oct 13 '19 at 19:25

Getter/ Setter on Click jquery

1 Answers1