Question

这就是我尝试做的事情：

1.用户点击其中一个选中的图标。 2.那个图标开始眨眼。 3.过了一会儿（请求的时间）闪烁停止。 4.然后检查className添加

这是我的代码也适用：

＆＃13;

function sleep (time) {
   return new Promise((resolve) => setTimeout(resolve, time));
}

function blink (time) {
  $(this).fadeToggle(time, function() {
    if (++n < t) {
      return blink.call(this, time)
    } else {
      n = 0;
    }
  })
}

var duration = 1000;
var n = 0;
var t = 10;
var blinks = duration / t;

$("body").on('click', '.fa-check', function(e) {
  // sleep() emulates a short waiting  time as ajax's request
  $.when(blink.call(this, blinks), sleep(duration))
  .then(() => {
     $('.fa-check').not(this).removeClass('checked');
     $(this).toggleClass('checked');
  });

});

＆＃13;

.fa-check {
  color: #aaa;
  cursor: pointer;
}

.fa-check.checked {
  color: #44b449;
}

＆＃13;

<script src="https://use.fontawesome.com/9e9ad91d21.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>answer1</p>
<i class="fa fa-check" aria-hidden="true"></i>
<hr>
<p>answer2</p>
<i class="fa fa-check checked" aria-hidden="true"></i>
<hr>
<p>answer3</p>
<i class="fa fa-check" aria-hidden="true"></i>

＆＃13;

如您所见，我已定义了一个名为sleep()的函数，该函数模拟了此类ajax请求的等待时间。现在我想使用真正的ajax代码。这是我到目前为止所尝试的内容：

function blink (time) {
  $(this).fadeToggle(time, function() {
    if (++n < t) {
      return blink.call(this, time)
    } else {
      n = 0;
    }
  })
}

$("body").on('click', '.fa-check', function(e) {

blink(); // start winking

    $.ajax({
        url :  urlhref,
        type : 'GET',
        dataType : 'JSON',
        success : function (acceptedanswering_system) {              
            if(acceptedanswering_system.error_msg){
                alert(acceptedanswering_system.error_msg);          

            } else {
                alert('done');
            }

            // some other codes here

        }
    });

});

我的问题：我没有特定时间将其初始化为duration变量。因为ajax请求的时间不是常数，所以它取决于服务器等。那么如何实现真正的ajax代码而不是模拟器函数？

Answer 1

如果我正确理解您的问题，您无法预测与远程服务器通信所需的时间。我的答案是，你不能（除非你是在一个非常特殊的环境中，但答案就是，你不应该）。

无法确定请求需要多长时间。这是因为互联网的本质，不同的路线，服务器不同方面的不同负载等......

您实际上要做的是使用回调来在服务器响应时执行某些操作。此回调可用于停止闪烁的图标。

这完全可以在$ .ajax的成功回调中完成。

尝试对异步数据使用回调或承诺。轮询更新可视为反模式。

Answer 2

因此，从评论中判断出你真正需要的是一个更好的闪光灯。看看这个：

var Blinker = function(el, time) {
    this.el = el;
    this.time = time;
    this.running = false;
    this._fader = this._fade.bind(this);
};
Blinker.prototype = {
    _fade: function() {
        if (!this.running) {
            return;
        }
        this.el.fadeToggle(this.time, this._fader);
    },
    start: function() {
        this.running = true;
        this._fader();
    },
    stop: function() {
        this.running = false;
    }
};

和用法：

$("body").on('click', '.fa-check', function(e) {
    var blinker = new Blinker($(this), 100);
    blinker.start();
    $.ajax({
        // some other code
        complete: function() {
            blinker.stop();
        }
    });
});

如何计算请求所需的时间？

2 个答案: