本文介绍了我怎么只能运行在改变一个AJAX调用当鼠标(或手指)不再拖拉?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一系列的改变计算值的互动滑块。

这是每一个微小的一拖手柄的移动运行的计算(通过鼠标按下或触摸拖动事件)。

我需要更新的值的数据库,但将preFER只抢到了值后,用户滴的句柄。

我如何能够确定手指或鼠标下来,以跳过Ajax调用?

 函数handleIsBeingDragged(){
    //基于所有的输入值的计算在这里
    //伪code检查mouseUp事件
    如果(mouseUp事件){
        //仅保存,如果鼠标现在最多 - 避免数百个拖动事件的更新
        $。阿贾克斯();
    }
}
 

解决方案

您需要有点滞后添加到您的code。

它发生了,我写了一个通用的去抖函数另一个答案的SO 这将是对这项有益的。

下面是你如何使用它:

 函数saveTheData(){
    $。阿贾克斯(); ///
}

VAR saveTheDataDebounced =去抖(50,saveTheData);

传播handleIsBeingDragged(){
    saveTheDataDebounced();
}
 

去抖功能:

  //去抖 - 去抖函数调用
//
//用法:变种F =反跳([保护时间,] FUNC);
//
//其中`guardTime`是在此期间,为晚饭preSS区间
//重复调用,和`func`在函数调用。
//您使用,而不是`func`返回函数来获得
//去除抖动;
//
//例:去抖一个jQuery`click`事件,所以如果它发生
//不止一次在一秒钟内(1,000ms),后续的
//被忽略:
//
// $(选择)。在(点击,反跳(1000,功能(五){
// //点击发生,但不是内previous 1000毫秒
//});
//
//两个`this`和参数通过。
去抖功能(保护时间,FUNC){
  变种最后= 0;

  如果(typeof运算保护时间===功能){
    FUNC =保护时间;
    保护时间= 100;
  }
  如果(!保护时间){
    抛出不给抖功能;
  }
  如果(!FUNC){
    抛出没有FUNC给抖;
  }

  返回函数(){
    VAR现在= +新的日期();
    如果(最后||(现在 - 过去)>!保护时间){
      最后=现在;
      返回func.apply(这一点,参数);
    }
  };
}
 

I have series of interactive sliders that change calculated values.

The calculations run on every tiny move of a dragged handle (via mousedown or touch drag event).

I need to update a database with the values but would prefer only to grab the values after the user "drops" the handle.

How can I determine if a finger or mouse is down, in order to skip the AJAX call?

function handleIsBeingDragged() {
    // calculations based on all the input values here
    // pseudo-code to check for mouseup event
    if (mouseUp) {
        // save only if mouse is now up - to avoid hundreds of updates per drag event
        $.ajax();
    }
}
解决方案

You need to add a bit of hysteresis to your code.

It happens I wrote a generic debounce function for another answer here on SO which would be useful for this.

Here's how you'd use it:

function saveTheData() {
    $.ajax(); ///
}

var saveTheDataDebounced = debounce(50, saveTheData);

function handleIsBeingDragged() {
    saveTheDataDebounced();
}

The debounce function:

// debounce - debounces a function call
//
// Usage: var f = debounce([guardTime, ] func);
//
// Where `guardTime` is the interval during which to suppress
// repeated calls, and `func` in the function to call.
// You use the returned function instead of `func` to get
// debouncing;
//
// Example: Debouncing a jQuery `click` event so if it happens
// more than once within a second (1,000ms), subsequent ones
// are ignored:
//
//    $("selector").on("click", debounce(1000, function(e) {
//      // Click occurred, but not within 1000ms of previous
//    });
//
// Both `this` and arguments are passed through.
function debounce(guardTime, func) {
  var last = 0;

  if (typeof guardTime === "function") {
    func = guardTime;
    guardTime = 100;
  }
  if (!guardTime) {
    throw "No function given to debounce";
  }
  if (!func) {
    throw "No func given to debounce";
  }

  return function() {
    var now = +new Date();
    if (!last || (now - last) > guardTime) {
      last = now;
      return func.apply(this, arguments);
    }
  };
}

这篇关于我怎么只能运行在改变一个AJAX调用当鼠标(或手指)不再拖拉?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-12 06:55