Geek asks and answers

Using $ (this) in setTimeout ();

I want to dynamically set timeouts in jQuery. Dynamically set timeout functions should use $ ("this"), but I can't get it to work.

Example:

$("div").each(function(){
    var content = $(this).attr('data-content')
    setTimeout("$(this).html('"+content+"')",$(this).attr('data-delay'));
});​

http://jsfiddle.net/qmhmQ/

What is the best way to do this?

+3
source share
6 answers
$("div").each(function(){
    var content = $(this).attr('data-content'),
        $this = $(this); // here $this keeps the reference of $(this)
    setTimeout(function() {

      // within this funciton you can't get the $(this) because
      // $(this) resides within in the scope of .each() function i.e $(this)
      // is an asset of .each() not setTimeout()
      // so to get $(this) here, we store it within a variable (here: $this) 
      // and then using it

        $this.html(content);
    }, $this.attr('data-delay'));
});​

Demo

+11
source

Your code should look like this:

  • pass a function instead of a string. Explanation: When passing a string to setTimeout, problems arise because it works in a different area than the original, and therefore you get errors.

  • use jQuery method data()

    $("div").each(function(){
     var content = $(this).attr('data-content'),
         $el = $(this),
         setContent = function(){
            $el.html(content);
         }
     setTimeout(setContent,$el.data('delay'));
});​

You can assign a function to a variable and pass that variable as a parameter to setTimeout, this is the cleanest way.

+3
source

( ).

setTimeout . this, (.. Call-site), .

jQuery.

$("div").each(function() {
  var instance = $(this);
  var content = instance.data('content');
  var method = function() {
    instance.html(content);
  };
  setTimeout(method, instance.data('delay'));
});
div {
  border: 1px solid black;
  margin: 5px;
  height: 1.5em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-content="fus" data-delay="1000"></div>
<div data-content="ro" data-delay="2000"></div>
<div data-content="dah" data-delay="5000"></div>
+3

$(this) , say "self" $( "div" ). each (function() {this line

var self=$(this);

.

+1

,

  • id div JavaScript. .

, HTML,

<div data-content="fus" data-delay="1000" class="dv"></div>
<div data-content="ro" data-delay="2000" class="dv"></div>
<div data-content="dah" data-delay="5000" class="dv"></div>​

JavaScript,

$(".dv").each(function(){
    var content = $(this).attr('data-content'),
    $this = $(this);
    setTimeout(function() {
       $this.html(content);
    }, $this.attr('data-delay'));
});​

$this = $(this);

Where we assign the current element to our variable used in the setTimeout function.

Please refer to this link.

+1
source

The following looks like a good compromise regarding gaps, readability, and identifying intentions.

$('div').each(function(){
    var element = $(this)
    var content = element.attr('data-content')
    var delayms = element.attr('data-delay')
    var action = function() { element.html(content) }

    setTimeout(action, delayms)
})

SEE: http://jsfiddle.net/wilmoore/LSs6g/

+1
source

More articles:


All Articles