He configurado un filtrado de isótopos con múltiples grupos de casillas de verificación y también un formulario de selección. También agregué un botón "clearAll" debajo de los grupos de filtros que borra todas las casillas de verificación y restablece la selección a cero (mostrar todo).

Me di cuenta de que cuando hago clic en este botón, se detecta un evento de cambio en las casillas de verificación y en el formulario de selección, y la función $input.change se ejecuta en los grupos de filtro, lo cual es imprudente en cuanto al rendimiento. Solo quiero aplicar el filter: '*' a mi contenedor de isótopos y no pasar por todo el $input.change(function(){}) .

 ($container = $('#grid')), ($input = $('#filters input, #filters select')); $checkboxes = $('#filters input'); $select = $('#filters.top-filters select'); $clearAll = $('.clear_all'); $container.isotope({ itemSelector: '.products', layoutMode: 'fitRows', }); $input.change(function () { [...My filtering code...] }); $clearAll.on('click', function (e) { e.preventDefault(); $checkboxes.prop('checked', false); $select.prop('selectedIndex', 0); $container.isotope({ filter: '*' }); });

¿Alguna idea sobre cómo podría restringir la función $input.change . change solo a la interacción del usuario?

Editar: traté de envolver la ejecución con una condición variable, pero todavía parece ejecutarse.

 ($container = $('#grid')), ($input = $('#filters input, #filters select')); $checkboxes = $('#filters input'); $select = $('#filters.top-filters select'); $clearAll = $('.clear_all'); $container.isotope({ itemSelector: '.products', layoutMode: 'fitRows', }); let execute = true; if(execute) { $input.change(function () { [...My filtering code...] }); } $clearAll.on('click', function (e) { execute = false; e.preventDefault(); $checkboxes.prop('checked', false); $select.prop('selectedIndex', 0); $container.isotope({ filter: '*' }); execute = true; });