0

I am trying to delay a keyup jquery event. The event to be delayed is this:

$(document).ready(function(){
  $("#leftsettingswindow").on("keyup", "#fontsize2", function(){
    var txtVal = this.value; 
    $('#content').css("font-size", txtVal + "%");
  });
});

I have attempted to use delay:

$(document).ready(function(){
  $("#leftsettingswindow").on("keyup", "#fontsize2", function(){
    var txtVal = this.value; 
    $('#content').delay(2000).css("font-size", txtVal + "%");
  });
});

and I have also attempted to use setTimeout like this

$(document).ready(function(){
  $("#leftsettingswindow").on("keyup", "#fontsize2", setTimeout(function(){
    var txtVal = this.value;
    $('#content').css("font-size", txtVal + "%");}, 3000);
  );
});

Could some one explain to me why the above delaying tactics are failing?

2
  • They stall my code, the first code works just fine, but when I modify it to delay the execution, the code does not work.
    – user1967599
    May 3, 2014 at 5:06
  • Searched SO with: 'delay jquery event'.. over 1'000 results
    – toesslab
    May 3, 2014 at 8:27

3 Answers 3

1

You cannot delay the callback function. Instead delay what you want.

$(document).ready(function () {
    $("#leftsettingswindow").on("keyup", "#fontsize2", function () {
        setTimeout(function () {
            var txtVal = this.value;
            $('#content').css("font-size", txtVal + "%");
        }, 3000);
    });
});
1
  • Hi, thanks but for some reason the resizing is not working now.
    – user1967599
    May 3, 2014 at 5:12
0

Try this

     $(document).ready(function(){
          $("#leftsettingswindow").on("keyup", "#fontsize2", 
           function() {
         setTimeout ( function () {

        var txtVal = this.value; $('#content').css("font-size", txtVal + "%");
        },1000);
        });
});
1
  • There is a }); missing at the end but even with those added it does not do anything, even the resizing is failing. Any other suggestions?
    – user1967599
    May 3, 2014 at 5:16
0

You can't use .delay() to deplay the execution of native function call. It is used to deplay execution of subsequent jquery effect in quene. "setTimeout" can meet your needs if you fix the callback issue.

According to your implementation, you try to fetch the value of "fontsize item" as "#content" font size. The root cause is the wrong parameter passing of the click event handler registering. The third parameter is the callback handler which will be invoked once event is being triggered. You should pass a function object istead of a "setTimeout" function call.

$("#leftsettingswindow").on("keyup", "#fontsize2", setTimeout(
  function(){
    var txtVal = this.value; 
    $('#content').css("font-size", txtVal + "%");
  }, 3000)
);

Try to implement like this:

$("#leftsettingswindow").on("keyup","#fontsize2",function(){
  var that = this;
  var $content = $("#content");
  setTimeout(function(){
    $content.css('font-size',that.value+"%");
  },2000);
});

Here is the jsFiddle demo.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.