Simple Form Starts Long Running Task and Watches Progress Want to level up my skills. It hits a php script that starts a long running export that can take few minutes to few hours. The export script outputs a progress file that this form's javascript uses for the progress bar.

How maintainable is this? What can I do to improve?

&lt;link rel="stylesheet" href="/css/minified.css"&gt;

&lt;form id="exportForm"&gt;
  &lt;input id="submitBtn" class="btn btn-primary" type="submit" value="Start Export"&gt;
&lt;/form&gt;

&lt;div class="text-center"&gt;
  &lt;progress id="progressBar" class="" value="0"&gt;&lt;/progress&gt;
  &lt;i id="spinner" class="hidden icon icon-spinner icon-pulse" aria-hidden="true"&gt;&lt;/i&gt;
&lt;/div&gt;

&lt;script src="/js/minified.js"&gt;&lt;/script&gt;
&lt;script&gt;
    (function($){

        let form = $('#exportForm');
        let submitBtn = $('#submitBtn');
        let progressBar = $('#progressBar');
        let spinner = $('#spinner');
        let interval;
        let exportProgress;

        form.on('submit', submitHandler);

        function submitHandler(e) {
            e.preventDefault();

            submitBtn.attr('disabled', true);
            progressBar.val(0);
            startSpinner();
            beginCheckingProgress();
        }

        function beginCheckingProgress() { interval = setInterval(getProgress, 1000); }

        function getProgress() {
            $.getJSON('some.json', function(data) {
                exportProgress = data;
                progressHandler();
            });
        }

        function progressHandler() {
            progressBar.val(exportProgress.progress / exportProgress.total);
            if(exportProgress.completed) reset();
        }

        function reset() {
            submitBtn.attr('disabled', false);
            clearInterval(interval);
            stopSpinner();
        }

        function startSpinner() { spinner.removeClass('hidden'); }
        function stopSpinner() { spinner.addClass('hidden'); }
    })(jQuery);
&lt;/script&gt;
Is there any reason you're using global variables rather than passing function arguments? e.g. 


exportProgress = data; progressHandler();



instead of progressHandler(data); ?

It's a much better practice to avoid globals as much as possible.
Instead of polling for progress every second, you could subscribe to SSE (Server Side Events), thus getting the latest progress updates and no unneeded traffic.

In JS this amounts to:

window.onload = function (e) {
    var source = new EventSource("get_progress");
    source.onmessage = function(event) {
        try {
            const response = JSON.parse(event.data);
            progressHandler(response)
            if (response.completed) {
                source.close();
            }
        } catch (error) {
            console.log(error);
        }
    }
}

function progressHandler(response) {
     progressBar.val(response.progress / response.total);
     if(response.completed) reset();
}