SetTimeout is not working in jquery

Question

I am trying to add and remove a class on click event, it is something like highlight an element, but nothing is happing here :(. Here is my code: JQ:

var listed=($('.vis').size())-1,
btn=$('.compare-btn');
  listed < 5 ? listed>=2?btn.show(500):null):btn.text("more").addClass('border').setTimeout(btn.removeClass('border'),2000);

CSS:

.border{border:2px solid red;width:95%!important;}

please let me know what is wrong with this code

Check error with using firebug on firefox or another devTools another browsers... — AliRıza Adıyahşi, Mar 11 '13 at 09:01
`setTimeout` is not a method of the jQuery object. It can't be chained to other jQuery methods. — Boaz, Mar 11 '13 at 09:01

score 5 · Accepted Answer · edited May 23 '17 at 12:11

setTimeout is a built in JavaScript method, it's not a part of jQuery, see the MDN article about it.

Refactor

btn.text("more").addClass('border').setTimeout(btn.removeClass('border'),2000);

To:

btn.text("more").addClass('border');
setTimeout(function(){

    btn.removeClass('border');

},2000);

I also think that the ternary operator does not help your code very much. It's making it a bit un-readable. Please consider using the simpler if-else construct instead, especially if you're not using the return value.

If you'd like, you can use the jQuery .delay function to accomplish similar syntax to what you attempted like this. I suggest you keep using setTimeout though, it's simpler and native.

score 0 · Answer 2 · answered Mar 11 '13 at 09:05

setTimeout is not a jquery function. It needs to be on it's own line:

var listed=($('p').size())-1,
    btn=$('.compare-btn');
    if(listed < 5) {
      if(listed>=2) {
         btn.show(500);
      }
      else {
         null;
      }
    }
    else
    {
       btn.text("more").addClass('border');
    }
}

setTimeout(function(){btn.removeClass('border'); } ,2000);

SetTimeout is not working in jquery

2 Answers2