I am having a custom state ex. 'visibility-state' which having values as true | false.

I am binding this state to all the settings and settings are in 1000+ numbers. SO when the state changes it is recalling all the states 1000+ times which seems to be a heavy process.

    var setActiveState = function () {
    // This is calling 1000+ times.
                            element.active.set( logic_to_toggle() );
    };

    // This is in the loop of all the controls.
    api.state('visibility-state').bind( setActiveState );

Is there any optimized way to remove all bound functions and set only for the expanded sections so controls under the expanded section would toggle only?

You can observe the delay here:

I am having a custom state ex. 'visibility-state' which having values as true | false.

I am binding this state to all the settings and settings are in 1000+ numbers. SO when the state changes it is recalling all the states 1000+ times which seems to be a heavy process.

    var setActiveState = function () {
    // This is calling 1000+ times.
                            element.active.set( logic_to_toggle() );
    };

    // This is in the loop of all the controls.
    api.state('visibility-state').bind( setActiveState );

Is there any optimized way to remove all bound functions and set only for the expanded sections so controls under the expanded section would toggle only?

You can observe the delay here: https://a.cl.ly/yAuZ8o0p

• plugins
• javascript
• jquery

1 Answer 1

Building upon How to hook on customizer section expanded/active/opened event? question, perhaps you could listen for the section (or panel) expanding like this to unbind functions from the previuos section and bind them to the current section.

(function ( api ) {

    // Wait for Customizer to be ready
    api.bind( 'ready', function() {

        // "cache"
        var currentPanel,
            currentSection;

        // Listen for panel expands
        api.panel.each( function ( thisPanel ) {
            thisPanel.expanded.bind( function( isExpanding ) {
                if (isExpanding) {
                    unbindCustomFunctions( currentPanel )
                    bindCustomFunctions( thisPanel );
                    currentPanel = thisPanel;
                }
            });
        });

        // Listen for section expands
        api.section.each( function ( thisSection ) {
            thisSection.expanded.bind( function( isExpanding ) {
                if (isExpanding) {
                    unbindCustomFunctions( currentSection )
                    bindCustomFunctions( thisSection );
                    currentSection = thisSection;
                }
            });
        });
    });

    function bindCustomFunctions( sectionOrPanel ) {
        // Code
    }

    function unbindCustomFunctions( sectionOrPanel ) {
        // Code
    }

} ( wp.customize ) );