javascriptjquery-uijquery-ui-spinner

How to call a function in jquery ui spinner stop event


I am using jquery ui spinner, I want to call a function on spinner stop event.

I do not want to call that function every stop event, only when the user stop clicking up or down arrow.

Change event works only the textbox loss the focus, I want when text box is on focus.

Thanks in Advance..


Solution

  • If you want your callback to be triggered after a sequence of clicks is over, you can use _.debounce for that. Here is the code and the plunker:

    $(function(){
      var expectedDelayBetweenClicks = 500;
      var element = $("input");
    
      element.spinner({
        start: function(e, ui) {
          $('.selected-value').text('Waiting...');
        },
    
        stop: _.debounce(function(e, ui) {
          $('.selected-value').text(e.target.value);
        }, expectedDelayBetweenClicks)
      })
    });
    

    This guarantees that you callback will be triggered only after several clicks, if the delay between those clicks is 500 ms. You can decrease this delay or increase it based on how fast you expect users to click the spinner.