javascript - 为什么我的嵌套 setTimeout 没有触发 removeAttr？

Question

我有两个运行正常的 setTimeout 函数，但我的 removeAttr 函数没有触发。我不知道这是为什么。

编辑:实际目标是在鼠标进入时将 feGaussianBlur 的变量“stdDeviation”从 0 设置为动画……在鼠标离开时设置为 7 到 0……不仅是一次，而是无限次。当第一个路径对象仍在进行动画处理时，第二个路径对象也应该能够单独进行动画处理。

下面是我的代码，但因为我使用的是插件，请点击此链接到 Codepen:https://codepen.io/ownage/pen/MdzvjW

var polyhoveron = TweenMax.to("#feGaussianBlur", .5, {
  paused:true,
  attr:{"stdDeviation":7},
  onUpdateParams:["{self}"]
});
var polyhoveroff = TweenMax.to("#feGaussianBlur2", .5, {
  paused:true,
  attr:{"stdDeviation":0},
  onUpdateParams:["{self}"]
});

$("svg path").mouseenter(function() {
    $(this).attr("filter", "url(#f1)");
    polyhoveron.play();
    $("p").text("Mouse has entered");
}).mouseleave(function() {
    $(this).attr("filter", "url(#f2)");
    $("p").text("Mouse has left");
    setTimeout(function() {
        setTimeout(function() {
            $(this).removeAttr("filter");
            $("p").text("Why didn't removeAttr work? Now it's broken and can't be started over.");
        }, 500);
        polyhoveroff.play();
        $("p").text("<polyhoveroff function>")
    }, 500);
});

html,body,svg {height:100%}
body {background:cornsilk;}
img,svg path {cursor:pointer;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.14.2/TweenMax.min.js"></script>
<p>Ready to hover. <b>Problem:</b> This only animates once so enjoy it.</p>
<svg viewBox="90 -10 300 200">

  <defs>

    <filter id="f1" x="-40%" y="-40%" height="200%" width="200%">
      <feOffset result="offOut" in="SourceAlpha" dx="0" dy="0" />
      <feGaussianBlur id="feGaussianBlur" result="blurOut" in="offOut" stdDeviation="0" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
    
    <filter id="f2" x="-40%" y="-40%" height="200%" width="200%">
      <feOffset result="offOut" in="SourceAlpha" dx="0" dy="0" />
      <feGaussianBlur id="feGaussianBlur2" result="blurOut" in="offOut" stdDeviation="7" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  
  </defs>
  
  <path d="m 156.29028,68.019096 c 4.67931,-1.988204 -0.12418,-10.666555 10.32783,-11.26589 1.83984,-0.1055 3.04194,0.379201 5.51291,0.764346 0.069,-1.457882 0.39368,-7.513956 0.18783,-9.0114 -0.20581,-1.497443 -2.17888,-0.886775 -3.88749,-1.604662 -2.9137,-2.004347 -3.60967,-4.508091 -4.90279,-7.066947 -1.43623,-2.842048 -2.74829,-5.873666 -3.08935,-9.039685 -0.38465,-3.570722 1.01485,-7.116117 1.23297,-10.703361 1.08612,-0.941004 2.17224,-1.882009 3.25836,-2.823013 -0.40015,-1.882008 -0.8003,-3.764017 -1.20045,-5.646025 -1.881,-1.240819 -5.47796,-1.429412 -4.39448,-4.3669975 0.12147,-1.7496304 0.24294,-3.4992608 0.36441,-5.2488912 -1.71492,0 -3.42985,0 -5.14477,0 1.55912,1.9274484 0.0233,3.2815506 -1.44728,4.4870662 -4.33942,4.6764345 -17.98037,9.8959195 -21.082,8.7530705 -0.2683,-2.332216 -2.37086,2.393413 -3.28353,0.596362 1.34212,2.644214 0.18957,5.899268 -2.70665,6.345448 -2.3295,-1.915206 -4.30895,-5.103085 -7.56114,-3.218799 -3.12217,0.22867 -5.92518,-1.40308 -8.60189,-2.759866 -1.57069,-0.466831 -4.99248,0.07945 -1.89293,1.516781 2.16684,0.932005 4.2283,1.962703 3.53082,4.572657 0,1.793017 0,3.586035 0,5.379053 3.17614,1.071151 2.57339,6.821091 5.18841,6.882203 6.54256,0.152896 6.52233,0.756564 8.9075,3.546429 5.61657,6.569528 3.49195,14.688396 5.04055,24.775964 0.71231,4.639968 4.29374,10.456375 8.59444,10.753658 2.6538,0.183442 4.77082,-4.041744 6.62733,-5.400138 6.44957,-2.977631 3.60533,1.641529 10.42139,-0.217363 z"></path>
  
  <path d="m 260.769,66.023156 c 3.8349,-4.788158 8.79324,-8.576249 12.7991,-13.224205 1.75034,-2.886256 3.43676,-4.132595 5.93865,-4.863527 1.36048,-1.366469 0.7359,-3.785632 1.10386,-5.678447 -0.76366,-0.838347 -1.35457,-2.029861 -2.22664,-2.646575 -0.99259,-0.08879 -2.12712,0.169001 -3.03839,-0.118352 -1.30495,-1.404354 -2.86845,-2.614797 -4.1339,-4.011836 -2.15241,-6.618271 -4.5275,-13.195742 -5.71384,-20.074944 -1.99173,-9.307097 -2.15055,-5.084229 -4.23803,-2.694703 -1.89331,2.261054 -3.97742,4.394485 -5.75197,6.734975 -2.17919,4.369109 -4.35839,8.738218 -6.53758,13.107327 -1.71492,1.11744 -3.42985,2.234883 -5.14477,3.352328 -1.4828,-0.470312 -2.96182,-1.251763 -4.44692,-1.533208 -4.79877,2.860083 -3.39481,-3.099681 -4.61322,-1.645561 -0.83557,0.646548 -3.16443,2.417752 -4.33214,2.171548 -2.60394,0.20477 -3.7511,-0.08068 -6.2436,-0.757161 -3.3e-4,1.040982 -0.36041,4.077489 1.15977,3.597984 1.14715,0.14345 2.47104,-0.492629 3.62131,0.0082 3.61471,1.043297 7.56377,3.356319 10.11497,7.322839 4.58458,7.718114 4.36102,8.17007 5.13813,13.923417 0.58204,4.309185 2.91437,2.859459 4.04981,4.539599 1.2544,1.856164 1.73521,3.698395 2.9847,6.021742 1.82746,3.202236 1.66695,4.37289 3.5547,4.410115 1.50738,0.02972 2.06302,-2.206341 2.97507,-3.406861 1.09428,-1.440386 1.85013,-3.122803 2.98093,-4.534694 z"></path>
  
</svg>

Answer 1

$("svg path").mouseenter(function() {
    $(this).attr("filter", "url(#f1)");
    polyhoveron.play();
    $("p").text("Mouse has entered");
}).mouseleave(function() {
    $(this).attr("filter", "url(#f2)");
    $("p").text("Mouse has left");
    setTimeout(function() {
        setTimeout(function() {
            $(this).removeAttr("filter");
            $("p").text("Why didn't removeAttr work? Now it's broken and can't be started over.");
        }, 500);
        polyhoveroff.play();
        $("p").text("<polyhoveroff function>")
    }, 500);
});

当您添加属性时这是(svg 路径)的范围，但是在鼠标悬停之后，您打算在两个嵌套的 setTimeout 之后删除属性，那么这个范围将更改为事件操作，这意味着这没有范围(svg 路径),

因此同样你需要将(svg 路径)实例存储到其他范围变量，这通过使用该变量删除属性

$("svg path").mouseenter(function() {
    $(this).attr("filter", "url(#f1)");
    polyhoveron.play();
    $("p").text("Mouse has entered");
}).mouseleave(function() {
    var $this = this;
    $(this).attr("filter", "url(#f2)");
    $("p").text("Mouse has left");
    setTimeout(function() {
        setTimeout(function() {
            console.log($($this).attr('filter'));
            $($this).removeAttr("filter");
            console.log($($this).attr('filter'));

            $("p").text("Why didn't removeAttr work? Now it's broken and can't be started over.");
        }, 500);
        polyhoveroff.play();
        $("p").text("<polyhoveroff function>")
    }, 500);
});