Is there a way to replace this timeout with a getter/ setter? I want the images in the filter gallery to be sorted based on the globalVariable value when a user clicks on a section.
Currently, I am using a timeout which stops working after one click. I have looked at this question for guidance, but I am still struggling to grasp it. You can find the codepen here. What would be the most effective approach to achieve this?
Part of the Code: /* Generate all items on "All", then generate the ones that match the globalVariable on click */
$grid.revealItems(GenerateItems(8));
/*This click function does not repeat, so no more items load after the 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');