标签: debouncing

我对javascript中的"debouncing"函数很感兴趣,这里写的:http://davidwalsh.name/javascript-debounce-function

不幸的是,代码没有清楚地解释清楚,让我理解.任何人都可以帮我弄清楚它是如何工作的(我在下面留下了我的评论).总之,我真的不明白这是如何工作的

   // Returns a function, that, as long as it continues to be invoked, will not
   // be triggered. The function will be called after it stops being called for
   // N milliseconds.


function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) …

我在Vue模板中有一个简单的输入框,我想或多或少地使用debounce:

<input type="text" v-model="filterKey" debounce="500">

但是,该debounce物业已在Vue 2中弃用.该建议仅说:"使用v-on:输入+第三方去抖功能".

你是如何正确实现它的？

我试图使用lodash,v-on:input和v-model来实现它,但我想知道是否可以不使用额外的变量.

在模板中:

<input type="text" v-on:input="debounceInput" v-model="searchInput">

在脚本中:

data: function () {
  return {
    searchInput: '',
    filterKey: ''
  }
},

methods: {
  debounceInput: _.debounce(function () {
    this.filterKey = this.searchInput;
  }, 500)
}

然后在computed道具中使用filterkey .

我想在输入文本框中停止输入(而不是在输入时)字符后触发事件.

我尝试过:

$('input#username').keypress(function() {
    var _this = $(this); // copy of this object for further usage

    setTimeout(function() {
        $.post('/ajax/fetch', {
            type: 'username',
            value: _this.val()
        }, function(data) {
            if(!data.success) {
                // continue working
            } else {
                // throw an error
            }
        }, 'json');
    }, 3000);
});

但是这个例子会为每个类型字符生成一个超时,如果输入20个字符,我会得到大约20个AJAX请求.

在这个小提琴上,我用简单的警报而不是AJAX来演示同样的问题.

有没有解决方案,或者我只是使用一种不好的方法？

这是我的异步验证器它没有去抖时间,我该如何添加它？

static emailExist(_signupService:SignupService) {
  return (control:Control) => {
    return new Promise((resolve, reject) => {
      _signupService.checkEmail(control.value)
        .subscribe(
          data => {
            if (data.response.available == true) {
              resolve(null);
            } else {
              resolve({emailExist: true});
            }
          },
          err => {
            resolve({emailExist: true});
          })
      })
    }
}

我正在收听硬件事件消息,但我需要去除它以避免太多查询.

这是一个发送机器状态的硬件事件,我必须将其存储在数据库中以用于统计目的,并且有时会发生其状态经常变化(闪烁？).在这种情况下,我想只存储一个"稳定"状态,我想在将状态存储到数据库之前等待1-2秒来实现它.

这是我的代码:

private MachineClass connect()
{
    try
    {
        MachineClass rpc = new MachineClass();
        rpc.RxVARxH += eventRxVARxH;
        return rpc;
    }
    catch (Exception e1)
    {
        log.Error(e1.Message);
        return null;
    }
}

private void eventRxVARxH(MachineClass Machine)
{
    log.Debug("Event fired");
}

我将这种行为称为"去抖动":等待几次才能真正完成其工作:如果在去抖时间内再次触发相同的事件,我必须解除第一个请求并开始等待去抖时间以完成第二个事件.

管理它的最佳选择是什么？只是一次性计时器？

要解释"去抖"功能,请参阅以下关键事件的javascript实现:http: //benalman.com/code/projects/jquery-throttle-debounce/examples/debounce/

我试图使用Ben Alman的jquery debouncing库去除按钮的输入. http://benalman.com/code/projects/jquery-throttle-debounce/examples/debounce/

目前这是我的代码.

function foo() {
    console.log("It works!")
};

$(".my-btn").click(function() {
    $.debounce(250, foo);
});

问题是,当我单击按钮时,该功能永远不会执行.我不确定我是否误解了一些东西但据我所知,我的代码与示例匹配.

我正在尝试开发一个TextField,在更改时更新Firestore数据库上的数据.它似乎工作,但我需要防止onChange事件多次触发.

在JS我会使用lodash _debounce()但在Dart中我不知道该怎么做.我已经阅读了一些去抖库但我无法弄清楚它们是如何工作的.

这是我的代码,它只是一个测试,所以有些奇怪的东西:

import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';


class ClientePage extends StatefulWidget {

  String idCliente;


  ClientePage(this.idCliente);

  @override
  _ClientePageState createState() => new _ClientePageState();


}

class _ClientePageState extends State<ClientePage> {

  TextEditingController nomeTextController = new TextEditingController();


  void initState() {
    super.initState();

    // Start listening to changes 
    nomeTextController.addListener(((){
        _updateNomeCliente(); // <- Prevent this function from run multiple times
    }));
  }


  _updateNomeCliente = (){

    print("Aggiorno nome cliente");
    Firestore.instance.collection('clienti').document(widget.idCliente).setData( {
      "nome" : nomeTextController.text
    }, merge: true);

  }



  @override
  Widget build(BuildContext context) {

    return new StreamBuilder<DocumentSnapshot>(
      stream: Firestore.instance.collection('clienti').document(widget.idCliente).snapshots(), …

任何人都可以用简单的英语解释RxJS Observavle去抖功能的作用吗？

我想它会偶尔发出一个事件,具体取决于参数,但我的代码不能像我预期的那样工作.

var x$ = Rx.Observable.fromEvent(window, 'click')
.map(function(e) {return {x:e.x, y:e.y};})
.debounce(1000)
.subscribe(function(el) {
  console.log(el);
});

和JsBin版本.

我希望这个代码每秒打印一次,无论我点击多快.相反,它打印我认为是随机间隔的点击.

我的网页上有一个搜索框,其中包含复选框,以便用户过滤其结果.一次只能检查一个复选框.

单击复选框时,我的代码将运行并将过滤器应用于列表并返回正确的结果.

我遇到的问题是,当快速连续点击多次复选框时,它会将请求排队并逐个拉回.如果选中复选框然后多次取消选中,则可能需要一段时间.

在Javascript中是否有任何方式通知函数它已被再次调用它应该停止除了最后一个请求之外的所有内容？

一个函数如何限制其调用？如果过于频繁,则不应丢弃这些调用,而是在时间上排队并间隔开,间隔为X毫秒.我看过油门和去抖动,但他们放弃了通话而不是将它们排队等待将来运行.

有没有比process()X毫秒间隔设置方法的队列更好的解决方案？JS框架中是否有这样的标准实现？到目前为止我看过underscore.js - 没什么.