Toggle between two functions

Question

Currently I have a button which changes its text from Pause to Resume when clicking on it. I use jQuery and toggle for this:

$(document).ready(function() {
    $("#pause").click(function() {
      $("td").toggle();
      $(this).html($(this).html() == "Pause" ? "Resume" : "Pause");
    });
});

This all works. I also have 2 functions:

function pauseTimer() 
function startTimer()

How do I "integrate" these two functions into my toggle code? So when I hit Pause it will toggle the text to Resume AND also use the function pauseTimer() and if I hit the button again, the text will change back to Pause and also use StartTimer()?

Thanks

Just turn the ternary statement in to a normal if condition containing the two statements. — Rory McCrossan
– Rory McCrossan, Commented Nov 12, 2013 at 14:19

Marikkani Chelladurai · Accepted Answer · 2013-11-12 14:19:58Z

2

$(this).html() == "Pause" ? pauseTimer() : startTimer();

Will work. You have to change the html content of the element to Start or Pause in the functions so that the function will run alternatively according to the html of the element.

answered Nov 12, 2013 at 14:19

Marikkani Chelladurai

1,4301 gold badge13 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mike Dinescu · Accepted Answer · 2013-11-12 14:18:33Z

1

Unless I completely misinterpreted your question this should do it:

$("#pause").click(function() {
  $("td").toggle();
  if($(this).html() == "Pause")
  {
      $(this).html("Resume");
      pauseTimer();
  }else{
      $(this).html("Pause");
      startTimer();
  }
});

answered Nov 12, 2013 at 14:18

Mike Dinescu

56k17 gold badges124 silver badges153 bronze badges

1 Comment

Maurice Over a year ago

Thanks all, I have chosen this one, suited me best

pax162 · Accepted Answer · 2013-11-12 14:18:56Z

1

Something like this ?

var doStuff = function(callback, text){
    callback();
    return text;
}
$(this).html($(this).html() == "Pause" ? doStuff(startTimer, "Resume") : doStuff(StartTimer, "Pause"));

answered Nov 12, 2013 at 14:18

pax162

4,7452 gold badges25 silver badges30 bronze badges

Comments

Plato · Accepted Answer · 2013-11-12 14:19:04Z

1

var globalTimerPaused = false;
$(document).ready(function() {
    $("#pause").click(function() {
      $("td").toggle();
      $(this).html($(this).html() == "Pause" ? "Resume" : "Pause");
      if(!globalTimerPaused){ pauseTimer() } else { startTimer() };
      globalTimerPaused = !globalTimerPaused;
    });
});

answered Nov 12, 2013 at 14:19

Plato

11.1k2 gold badges46 silver badges63 bronze badges

1 Comment

Plato Over a year ago

use mine in scenarios where you have need to access the state of the timer in blocks of code outside the if statement

Afzaal Ahmad Zeeshan · Accepted Answer · 2013-11-12 14:19:49Z

1

Try this

$('selector').click(function () { // on click event
  var song = $('theaudiotag');
  if(song.paused) { // if song is paused
     $(this).play(); // play it
     $(this).html('Pause'); // change text
  } else { // otherwise
     $(this).pause(); // pause it
     $(this).html('Play'); // change text
  }
}

This uses jQuery API to check for the current status of the audio tag, and then toggle its state to play or pause and at the same time. It will work cross-browser.

answered Nov 12, 2013 at 14:19

Afzaal Ahmad Zeeshan

15.9k14 gold badges61 silver badges106 bronze badges

Comments

palaѕн · Accepted Answer · 2013-11-12 14:19:52Z

1

You can use the window method here like:

$("#pause").click(function () {
    $("td").toggle();
    $(this).html($(this).html() == "Pause" ? "Resume" : "Pause");
    window[$(this).html() === "Resume" ? "pauseTimer" : "startTimer"]();
});

answered Nov 12, 2013 at 14:19

palaѕн

74.2k17 gold badges123 silver badges140 bronze badges

Comments

Dan Brown · Accepted Answer · 2013-11-12 14:25:29Z

1

You can use the jQuery is visible method:

if ($('td').is(":visible"))
{
pauseTimer();
}
else
{
startTimer()
}

Dan

answered Nov 12, 2013 at 14:25

Dan Brown

1,5251 gold badge9 silver badges13 bronze badges

Comments

Danny · Accepted Answer · 2013-11-12 14:34:23Z

1

Another option would be to do the following.

//jQuery 1.8 toggle replacement
$.fn.toggleClick = function(){
    var methods = arguments,
        count = methods.length;
    return this.each(function(i, item){
        var index = 0;
        $(item).click(function(){
            return methods[index++ % count].apply(this,arguments);
        });
    });
};

function startTime() {
    $("td").toggle();
    $(this).val("Start");
}

function pauseTime() {
    $("td").toggle();
    $(this).val("Pause");
}

$("#clickme").toggleClick(startTime,pauseTime);

JSFiddle

answered Nov 12, 2013 at 14:34

Danny

7,5379 gold badges49 silver badges71 bronze badges

Comments

user2550165 · Accepted Answer · 2013-11-12 14:39:20Z

1

$(document).ready(function() {
$("#pause").click(function(pauseTimer(),StartTimer()) {
  $("td").toggle();
  $(this).html($(this).html() == "Pause" ? "Resume" : "Pause");
});
});

answered Nov 12, 2013 at 14:39

user2550165

251 gold badge2 silver badges6 bronze badges

Collectives™ on Stack Overflow

Toggle between two functions

9 Answers 9

Comments

1 Comment

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

Comments

1 Comment

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related