javascript - Why it works only once? -

it must toggle div. no using 'toggle' method.

$(document).ready(function(){       function brfun() {         $('div').addclass('br');         settimeout('$(\'div\').removeclass(\'br\')', 2000)       };       setinterval(brfun, 2000);     }); 

problem delay, class added brfun timeout executed remove class executing both in 2 secs interval

$(document).ready(function () {     function brfun() {         $('div').addclass('br');         settimeout('$(\'div\').removeclass(\'br\')', 2000)     };     setinterval(brfun, 4000); }); 

$(document).ready(function() {    function brfun() {      $('div').addclass('br');      settimeout('$(\'div\').removeclass(\'br\')', 2000)    };    setinterval(brfun, 4000);  });

.br {    color: red;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <div>soemt message</div>

---

without using second timer

$(document).ready(function () {     var $div = $('div');      function brfun() {         if ($div.hasclass('br')) {             $div.removeclass('br');         } else {             $div.addclass('br');         }     };     setinterval(brfun, 2000); }); 

demo: fiddle

or shorter

$(document).ready(function () {     var $div = $('div');      function brfun() {         $div[($div.hasclass('br') ? 'remove' : 'add') + 'class']('br');     };     setinterval(brfun, 2000); }); 

demo: fiddle