javascript - 动态设置超时

Question

如何清理超时几个悬停元素？

我的代码如下：

$(document).ready(function(){
    $(".imagenesC").hover(imagenesCEntrada,imagenesCSalida);
});

var timeouts = {};  
function imagenesCEntrada(){
  var id=$(this).attr("id");
  clearTimeout(timeouts['cuadricula'][id]);
  $("#"+id).stop(true).animate({"opacity":"0"},1000); 
}

function imagenesCSalida(){
    var id=$(this).attr("id");
    timeouts['cuadricula'][id] = setTimeout(function(){
        $("#"+id).stop(true).animate({"opacity":"1"},1000);
    }, 100);
}

问候

Answer 1

似乎您有多个具有同一个类的元素，您可以使用它们的索引来创建一个动态的计时器数组。

请参阅工作片段。

var timer = [];

$('.label').mouseenter(function(){
    clearTimeout(timer[$(this).index()]);
    console.log("Mouse enter");
    $('#' + this.id + ' div').slideDown('slow');
});
$('.label').mouseleave(function(){
    var temp = $('#' + this.id + ' div');
    timer[$(this).index()] = setTimeout(function() { 
        console.log("Mouse leave");
        temp.stop().slideUp('slow');
    }, 2000);
});


$(document).ready(function(){
    $(".imagenesC").hover(imagenesCEntrada,imagenesCSalida);
});

var timeouts = [];  
function imagenesCEntrada(){
  var id=$(this).attr("id");
  clearTimeout(timeouts[$(this).index()]);
  console.log("clear");
  $("#"+id).stop(true).animate({"opacity":"0"},1000); 
}

function imagenesCSalida(){
    var id=$(this).attr("id");
    console.log("enter");
    timeouts[$(this).index()] = setTimeout(function(){
        $("#"+id).stop(true).animate({"opacity":"1"},1000);
    }, 100);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="label" id="dummyId1">Demo1</div>
<div class="label" id="dummyId2">Demo2</div>
<div class="label" id="dummyId3">Demo3</div>
<div class="label" id="dummyId4">Demo4</div>



<div class="imagenesC" id="imagenesC1">imagenesC1</div>
<div class="imagenesC" id="imagenesC2">imagenesC2</div>
<div class="imagenesC" id="imagenesC3">imagenesC3</div>
<div class="imagenesC" id="imagenesC4">imagenesC4</div>