Question

我想先运行一个函数并删除一个类，然后再将用户路由到单击的链接。

HTML很简单

<div class="blurred-box opaqueNotInView">

    <div class="user-login-box">

        <span class="user-icon"></span>
        <div class="user-name">Admin</div>

        <button type="submit" class="user-password"><a class="goto"
            href="/auth/logout">Logout</a></button>
        </div>

    </div>

JS看起来像这样：

$(".goto").on('click', function(e) {

    e.preventDefault();

    var time = 500;
    $('.blurred-box').each(function(i) {

        var row = $(this);

        setTimeout(function() {
            row.removeClass("notOpaqueInView");
            row.addClass('opaqueNotInView');
            console.log("bye");

        }, time);
        time += 500; // everything works as intended until here

    });

    window.location = $(this).attr('href'); // goes straight to the href, no animation , no console log
    window.location = e.target.attr('href'); // gives e.target.attr is not a function, executes the animations and console logs, but does not go to the link
});

这是怎么了？

我只想阻止默认的链接行为，然后运行each / setTimeout结构，然后转到href="/auth/logout"。

没有codepen，因为这是一个nodeJS项目。

Answer 1

我将您的代码简化为基本知识，并提供了一个演示。这里的关键是找出您有多少blurred-box，然后将重定向添加到末尾。另外，我将time从0开始，并在每次500调用一次setTimeout时添加blurred-box。

$(".goto").on('click', function(e) {
  e.preventDefault();
  
  time = 0;
  boxCount = $('.blurred-box').length;
  $('.blurred-box').each(function(i) {
    var row = $(this);
    setTimeout(function() {
      row.removeClass("notOpaqueInView");
      row.addClass('opaqueNotInView');
      
      if (i == boxCount - 1) {
        console.log('bye');
      	window.location = e.target.href;
      }
    }, time+=500)
  });
});

.notOpaqueInView { background-color: red }
.opaqueNotInView { background-color: blue }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="https://stackoverflow.com" class="goto">Stack Overflow</a>
<section class="blurred-box notOpaqueInView">
  Blurred Box 1
</section>
<section class="blurred-box notOpaqueInView">
  Blurred Box 2
</section>
<section class="blurred-box notOpaqueInView">
  Blurred Box 3
</section>

Answer 2

主要补充是：

var set = $('.blurred-box');
var length = set.length;

和

if(i === length-1){

    setTimeout(function(){ // allow the last class addition/removal to be seen

        window.location = $(this).attr('href');
        window.location = e.target.attr('href');

    },500)
}

完整的工作代码：

$(".goto").on('click', function(e) {

    e.preventDefault();

    var set = $('.blurred-box');
    var length = set.length;

    var time = 500;
    $('.blurred-box').each(function(i){
        var row = $(this);
        setTimeout(function() {
            row.removeClass("notOpaqueInView");
            row.addClass('opaqueNotInView');
            console.log("bye");

            if(i === length-1){

                setTimeout(function(){ // allow the last class addition/removal to be seen

                    window.location = $(this).attr('href');
                    window.location = e.target.attr('href');

                },500)
            }

        }, time);
        time += 500;

    });
});

在for循环中一系列超时后执行一些操作

2 个答案: