CODEWITHSUNDEEP
javascriptjquery
user1967599
user1967599

Reputation:

trying to delay jquery event

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?

Upvotes: 0

Views: 72

Answers (3)

Chickenrice
Chickenrice

Reputation: 5727

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.

Upvotes: 0

sshet
sshet

Reputation: 1160

Try this

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

        var txtVal = this.value; $('#content').css("font-size", txtVal + "%");
        },1000);
        });
});

Upvotes: 0

Amit Joki
Amit Joki

Reputation: 59252

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);
    });
});

Upvotes: 1

Related Questions