jquery define timeout when calling function

Question

I am stuck on getting a timeout working. I already have a working code but it seems to me the wrong way to do it.

Working code but probably not the best:

/* Autosave */
// On load we hide all autosave messages.
$('.jform_params_autosave-cg').hide();
// Below is the function that handles the autosave.
$.fn.autoSave = function(){
  // We remove the autosave message from it's place defined by the xml and add it to the system message container.
  var autosavemessage = $('.jform_params_autosave-cg');
  autosavemessage.detach();
  autosavemessage.appendTo('#system-message-container');
  // Now we show the message.
  $('.jform_params_autosave-cg').show();
  // Here we save the extension.
  Joomla.submitbutton('module.apply');
}
// On change of the below elements we run the autosave.
//------------------------------------------//
// DUPLICATE AUTOSAVE FUNCTION BELOW
//------------------------------------------//
// Autosave: Theme Selection
$("#jform_params_theme_selection").change(function() {
  $.fn.autoSave();
});
// Autosave: Add Content
$("a.group-add.btn.btn-mini.button.btn-success").click(function() {
  setTimeout(
    function()
    {
      $.fn.autoSave();
    }, 5000);
});

The Function:

$.fn.autoSave = function(){
  // We remove the autosave message from it's place defined by the xml and add it to the system message container.
  var autosavemessage = $('.jform_params_autosave-cg');
  autosavemessage.detach();
  autosavemessage.appendTo('#system-message-container');
  // Now we show the message.
  $('.jform_params_autosave-cg').show();
  // Here we save the extension.
  Joomla.submitbutton('module.apply');
}

The Function Call

$("#jform_params_theme_selection").change(function() {
  $.fn.autoSave();
});

The Function Call with Timeout

$("a.group-add.btn.btn-mini.button.btn-success").click(function() {
  setTimeout(
    function()
    {
      $.fn.autoSave();
    }, 5000);
});

What do I want to achieve

Make the Timeout inside the function.
Define the timeout when calling the function.

With defining I mean calling it something like $.fn.autoSave(5000); or $.fn.autoSave().timeout(500);

I have been trying to get a working code but so far no luck. Will keep updating this post whenever I get more success or details to add.

Thanks everyone for helping.

Any link to existing SO questions will also be appreciated as I might be googling for the wrong key words.

You are looking for "Create a Plugin" check here learn.jquery.com/plugins/basic-plugin-creation — Tolgahan Albayrak
– Tolgahan Albayrak, Commented Feb 7, 2017 at 20:00
@TolgahanAlbayrak Thank you for the link. Indeed that is what I am looking for. Unfortunately in the quick glance I took over the page there is no example with timeout. Going to read it from A to Z but don't think it is on the page. — purple11111
– purple11111, Commented Feb 7, 2017 at 20:03

Tolgahan Albayrak · Accepted Answer · 2017-02-07 20:09:23Z

2

Here it is the modified version of your function. Now it has optional timeout parameter. You can use it like

$('selector').autoSave(5000) or $('selector').autoSave()

$.fn.autoSave = function(timeout) {
  function doIt() {
    // We remove the autosave message from it's place defined by the xml and add it to the system message container.
    var autosavemessage = $('.jform_params_autosave-cg');
    autosavemessage.detach();
    autosavemessage.appendTo('#system-message-container');
    // Now we show the message.
    $('.jform_params_autosave-cg').show();
    // Here we save the extension.
    Joomla.submitbutton('module.apply');
    return this;
  }
  timeout = Number(timeout) || 0;
  var f = doIt.bind(this);
  if(timeout < 0) return f();
  setTimeout(f, timeout);
  return this;
}

answered Feb 7, 2017 at 20:09

Tolgahan Albayrak

3,2161 gold badge27 silver badges28 bronze badges

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

4 Comments

purple11111 Over a year ago

Thank you so much it works directly. Would you mind explaining what the last 5 lines are doing? PS: In this case the selector was: $.fn.autoSave(5000);

Tolgahan Albayrak Over a year ago

Sure, It wraps the current logic into an inner callback to get rid of writing same lines twice. Then it checks if timeout parameter is positive number. If not It calls main logic directly, otherwise it triggers a timeout for our inner callback.

Tolgahan Albayrak Over a year ago

@purple11111 Actually $.fn.autoSave is not a selector. It is calling plugin method directly. When you have a function in $.fn object, that mean you will be able to use the same function like $('your_element_selector').yourFunction(). It is plugin feature of jQuery

purple11111 Over a year ago

Ah oke. I am sure I will understand that after I read the link you gave from A to Z. Thanks man you really helped me out a lot here! With your piece of code it looks a lot better then duplicating the timeout! Have a great day!

Collectives™ on Stack Overflow

jquery define timeout when calling function

Working code but probably not the best:

The Function:

The Function Call

The Function Call with Timeout

What do I want to achieve

Thanks everyone for helping.

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Working code but probably not the best:

The Function:

The Function Call

The Function Call with Timeout

What do I want to achieve

Thanks everyone for helping.

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related