简单场景

我有一个列表，我实现了使用箭头键(向上、向下)进行浏览，并且在当前列表项的每次更改时，都会通过 AJAX 加载一个数据库对象。

甜蜜的。

问题

当用户快速浏览列表时，我不希望每个请求都关闭。但当然，最初的请求应该立即关闭。

我的想法是使用变量作为延迟来设置超时，并在项目初始加载后增加该变量。

这行得通，但是当用户暂时停止浏览但随后继续浏览时，我仍然不希望每个请求都关闭。

所以我想，延迟变量必须随着每次浏览事件而合理增加，直到达到阈值。

这种有机的方法将成功地减少不必要的元素加载量。

我的解决方案

我来得很远。这段代码(下面的解释)将完成这项工作，有一个主要罪魁祸首:

第一次浏览完成然后停止后，延迟将自动保持在(第 2 步)最小值 150 毫秒。

当然，我试图解决这个问题，但正如您将看到的，这是一个有趣但可能相当普遍的逻辑问题——我认为我的整体方法是错误的。

但是我不知道怎么办。大脑不计算。电脑说不。

代码

您可以筛选我给出的示例或 go here for a fully functional simulator in jsFiddle .

如果您选择 jsFiddle:

点击按钮，项目负载立即出现。现在稍等一下，再次单击按钮，初始加载将延迟。如果您连续快速按下按钮，则只有在您完成点击后才会显示项目加载。

代码示例

如你所知，我们在对象字面量中。

_clickTimer: false,                     // holds what setTimeout() returns
_timerInc: 0,                           // the your timer delay are belong to us

/**
 * Function is triggered whenever the user hits an arrow key
 * itemRef is the passed list item object (table row, in this case)
 */

triggerItemClick: function(itemRef){

    var that=this;
    var itemId=$(itemRef).data('id');   // Get the item id

    if(this._clickTimer){               // If a timeout is waiting

        clearTimeout(this._clickTimer); // we clear it
        this._itemClickTimer=false;     // and reset the variable to false

        /**
         * Note that we only arrive here after the first call
         * because this._clickTimer will be false on first run
         */

        if(this._timerInc == 0){        // If our timer is zero
            this._timerInc = 150;       // we set it to 150
        } else {                        // otherwise
            if(this._timerInc <= 350)   // we check if it is lower than 350 (this is our threshold)
                this._timerInc += 15;   // and if so, we increase in steps of 15
        }

    } 

    /**
     * Regardless of any timing issues, we always want the list
     * to respond to browsing (even if we're not loading an item.
     */

    this.toggleListItem(itemId);

    /**
     * Here we now set the timeout and assign it to this._clickTimer
     */

    this._clickTimer=setTimeout(function(){

        // we now perform the actual loading of the item
        that.selectItem(itemId);

        // and we reset our delay to zero
        that._timerInc=0;

    }, this._timerInc); // we use the delay for setTimeout()

}

解释

第一次调用时:_clickTimer 为 false，_timerInc 为 0，因此第一次调用将导致setTimeout() 和 _clickTimer 的延迟 0 将被设置。该项目将立即加载。

第二次调用 - 鉴于我们的超时仍在等待触发，_clickTimer 被清除，延迟设置为 150 如果 0如果低于 350(阈值)，则增加 15。

如果您继续浏览，这会非常有效。计时器增加，只有在您停止浏览一段时间后才会触发负载。

但是在你停止之后，下次继续时，_clickTimer将不为false(因为setTimeout() 为其分配一个计数器)，因此 _timerInc 将立即设置为 150。因此，第一次浏览将导致在加载任何内容之前有 150 毫秒的延迟。

不管我是疯了还是挑剔，但我的目标是不要有这种延迟。

当然你会说:很简单，在 setTimeout() 闭包结束时将 _clickTimer 设置为 false，这样一旦浏览完成它就会被重置，并且项目被加载。很好，但这导致延迟永远不会超过 0 毫秒。仔细想想，您就会明白。

我希望这得到了正确的解释，并且有人的大脑比我的更有能力找到解决方案。

最佳答案

使用 Promises 以非常复杂的方式执行此操作可能是可能的.由于这主要是糖衣，但我认为一定可以直接解决这个问题，我想我做到了。

Updated fiddle .我在文本中添加了延迟，这样我调试东西就更容易了，也做了一些小的整理，但我的实际变化很小。详情如下。

你最后的话是我的第一直觉:

Of course you'll say: simple, set _clickTimer to false at the end of the setTimeout() closure, so it gets reset once browsing is done and an item gets loaded. Great, but this results in the delay never going above 0ms.

确实，这将使延迟永远不会超过 0，因为我们不能那么快地单击(或在您的实际应用程序中快速浏览)。但是...如果我们只在延迟不为 0 时才重置 怎么办？因此，如果超时结束，但仅在 0 毫秒后结束，我们就会记住有超时。如果它晚于此关闭，则浏览中一定发生了实际暂停。这很容易实现，只需在超时回调中添加几行，如下所示。

this._clickTimer = setTimeout(function() {

  // we now perform the actual loading of the item
  that.selectItem();

  // and we reset our delay to zero
  if (that._timerInc > 0) {
    that._clickTimer = false;
  }
  that._timerInc = 0;

}, this._timerInc); // we use the delay for setTimeout()

它似乎完全按照您想要的方式工作，除了现在，延迟将为 0 毫秒，然后是 150 毫秒，然后是 0 毫秒，等等，如果您在点击之间等待足够长的时间。这可以通过添加额外的超时来解决，以防延迟是 0ms，这仍然会重置延迟。每当触发发生时(在演示中单击，在您的应用程序中浏览)，此超时将被取消。

我相信，这一切都可以按照您想要的方式运行。为了完整起见，我还将上面提到的 fiddle 作为片段包含在此处。

var _simulator = {

  _clickTimer: false, // holds what setTimeout() returns
  _cancelClickTimer: false,
  _timerInc: 0, // the your timer delay are belong to us

  /**
   * Function is triggered whenever the user hits an arrow key
   * itemRef is the passed list item object (table row, in this case)
   */
  triggerItemClick: function() {

    var that = this;
    
    // always cancel resetting the timing, it can never hurt
    clearTimeout(that._cancelClickTimer);
    that._cancelClickTimer = false;

    if (this._clickTimer) { // If a timeout is waiting
      clearTimeout(this._clickTimer); // we clear it
      this._clickTimer = false; // and reset the variable to false

      /**
       * Note that we only arrive here after the first call
       * because this._clickTimer will be false on first run
       */
      if (this._timerInc == 0) { // If our timer is zero
        this._timerInc = 150; // we set it to 150
      } else { // otherwise
        if (this._timerInc <= 350) // we check if it is lower than 350 (this is our threshold)
          this._timerInc += 15; // and if so, we increase in steps of 15
      }
    }

    /**
     * Regardless of any timing issues, we always want the list
     * to respond to browsing (even if we're not loading an item.
     */
    this.toggleListItem();

    /**
     * Here we now set the timeout and assign it to this._clickTimer
     */
    this._clickTimer = setTimeout(function() {

      // we now perform the actual loading of the item
      that.selectItem();

      // and we reset our delay to zero
      if (that._timerInc > 0) {
      	that._clickTimer = false;
      } else {
      	that._cancelClickTimer = setTimeout(function() {
        	that._clickTimer = false;
        }, 150);
      }
      that._timerInc = 0;

    }, this._timerInc); // we use the delay for setTimeout()

  },

  /** the following functions are irrelevant for the problemsolving above **/

  toggleListItem: function() {
    $('#status').prepend($('<div />').text('You toggled a list item ... in ' + this._timerInc + ' ms'));
  },

  selectItem: function(id) {
    $('#loader').show();
    setTimeout(function() {
      $('#loader').hide();
    }, 800);
  }

};

$('#clickZone').on('click', function() {
  _simulator.triggerItemClick();
});

#clickZone {
  background: #369;
  color: #fff;
  width: 420px;
  height: 80px;
  text-align: center;
  line-height: 80px;
  cursor: pointer;
  -ms-user-select: none;
  -moz-user-select: -moz-none;
  -webkit-user-select: none;
  user-select: none;
  font-family: Arial;
}

#status {
  line-height: 20px;
  margin-top: 10px;
  font-family: Arial;
  font-size: 12px;
  background: #936;
  color: #fff;
  padding: 7px 10px;
}

#status > div {
  padding: 2px 0 4px;
  border-bottom: 1px dashed #ddd;
}

#status > div:last-child {
  border-bottom: 0;
}

#loader,
#notice {
  display: none;
  margin-top: 10px;
  width: 320px;
  padding: 10px 15px;
  background: #ddd;
  font-family: Arial;
  font-size: 11px;
  text-align: center;
}

#notice {
  background: lightblue;
  font-size: 14px;
  color: #333;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="clickZone">
  CLICK ME TO SIMULATE LIST BROWSING
</div>
<div id="loader">
  &#10003; &nbsp;Browsing ended, loading item!
</div>
<div id="status">
  <div>
    Waiting for something to happen ...
  </div>
</div>

关于javascript - 使用箭头键和智能延迟加载实现有机列表浏览，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42573225/