Extracting Javascript functions

Question

I have this jQuery click handler function that has three jobs:

1. Set the time interval for the refresh rate
2. Change the color on the clicked refresh rate selection
3. Callback the tablesort functions to resort the newly loaded data

I'd like to pull out the separate functionality into named functions, but I'm unsure (being a somewhat JS newb) how to do that an achieve the same behavior.

Javascript Code:

$(document).ready(function() {

    $("#refresh-buttons").on("click", "button", function(event) {

        var interval = 0;

        switch(event.target.id)  {
          case "refresh-off" :
                interval = 50000000;
                $(this).parent().children().removeClass("pressed-button");
                $(this).addClass("pressed-button");
                break;

          case "refresh-5-sec" :
              interval = 5000;
              $(this).parent().children().removeClass("pressed-button");
              $(this).addClass("pressed-button");
              break;

          case "refresh-30-sec" :
              interval = 30000;
              $(this).parent().children().removeClass("pressed-button");
              $(this).addClass("pressed-button");
              break;

          case "refresh-60-sec" :
              interval = 60000;
              $(this).parent().children().removeClass("pressed-button");
              $(this).addClass("pressed-button");
              break;
        }

        if (interval != 0)
        {
            clearInterval(intervalId);
            intervalId = setInterval(function(){
                $('#status-tables').load('/dashboard/index #status-tables', function(){
                  $("#workstation-table").tablesorter();
                  $("#report-table1").tablesorter({sortList:[[1,0]]} );
                  $("#report-table2").tablesorter({sortList:[[1,0]]});
                });
            }, interval);
        }

    });
});

Answer 1

Add the refresh-rates map to #refresh-buttons element ( use .data() function ), optimize amount of $() calls:

$(document).ready(function() {
    var refresh_btns$;

    // you can store id map where ever you prefer to
    // I've figured it would be good to keep them with
    // the element they are related to
    ( refresh_btns$ = $("#refresh-buttons") )
    .data(
        "refreshRates",
        {
            "refresh-off"    :50000000,
            "refresh-5-sec"  :5000,
            "refresh-30-sec" :30000,
            "refresh-60-sec" :60000
        }
    )
    .on("click", "button", function () {
        var
        interval = refresh_btns$.data("refreshRates")[ this.id ] || 0;
        if (
            interval !== 0
        ) {
            // yeah m_x is right about .toggleClass()
            // it producess weird behaviour
            // this shold to the job
            $( this )
            .addClass("pressed-button")
            .siblings()
            .removeClass("pressed-button");

            clearInterval(intervalId);
            intervalId =
            setInterval(
                function () {
                    $('#status-tables')
                    .load(
                        '/dashboard/index #status-tables',
                        function () {
                            $("#workstation-table").tablesorter();
                            $("#report-table1, #report-table2")
                            .tablesorter( { sortList : [ [ 1, 0 ] ] } );
                        }
                    );
                },
                interval
            );
        }
    });
});