标签: debounce

我有一个带有用户名输入的表单，我正在尝试验证用户名是否在去抖动功能中使用。我遇到的问题是，当我输入“user”时，我的去抖动似乎不起作用，我的控制台看起来像

u
us
use
user

这是我的去抖功能

export function debounce(func, wait, immediate) {
    var timeout;

    return () => {
        var context = this, args = arguments;

        var later = () => {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };

        var callNow = immediate && !timeout;

        clearTimeout(timeout);

        timeout = setTimeout(later, wait);

        if (callNow) func.apply(context, args);
    };
};

这是我在 React 组件中调用它的方式

import React, { useEffect } from 'react' 

// verify username
useEffect(() => {
    if(state.username !== "") {
        verify();
    }
}, [state.username]) …

最好先看看我的代码:

import React, { Component } from 'react';
import _ from 'lodash';
import Services from 'Services'; // Webservice calls

export default class componentName extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: this.props.value || null
    }
  }

  onChange(value) {
    this.setState({ value });

    // This doesn't call Services.setValue at all
    _.debounce(() => Services.setValue(value), 1000);
  }

  render() {
    return (
      <div>
        <input 
          onChange={(event, value) => this.onChange(value)}
          value={this.state.value}
        />
      </div>
    )
  }
}

只是一个简单的输入.在构造函数中,它value从道具(如果可用)中获取组件的本地状态.

然后在I 的onChange函数中input更新状态,然后尝试调用webservice端点来设置新值 …

我正在寻找debounce一系列事件的运营商,让我们说用户的点击.输入和输出应该是这样的:

interval :      ->     <-            ->     <-
in       : 1--2--3-------4--5--5--6-7-8--------
out      : 1-------------4---------------------

这个想法就像下划线的immediate选择on http://underscorejs.org/#debounce一样.可以使用支持Reactive Extensions的任何语言呈现/实现运算符

编辑:澄清间隔,比如说5秒(两个箭头之间有5个空格): -> <-

Edit2:一个更容易理解的版本:我有一个用户,他反复点击一个按钮(1,2,3); 我想抓住第一个click(1)并忽略其余部分.过了一会儿,他累了,休息了7秒钟(这比两个箭头之间的5秒间隔长)并继续再次点击按钮(4,5,6,7,8)我想赶上第一个click(4并忽略其余的.

如果他在第四个箭头后点击,我也想抓住那个点击.

Edit3:这是一张图片 可以在原始文章中找到

如何去除在"keyUp"事件中调用的函数？

这是我的代码:

我的功能

private handleSearch(searchTextValue: string, skip?: number): void {
    this.searchTextValue = searchTextValue;
    if (this.skip === 0 || typeof skip === "undefined") {
        this.skip = 0;
        this.pageIndex = 1;
    } else {
        this.skip = skip;
    }
    this.searchTextChanged.emit({ searchTextValue: searchTextValue, skip: this.skip, take: this.itemsPerPage });
}

我的HTML

<input type="text" class="form-control" placeholder="{{ 'searchquery' | translate }}" id="searchText" #searchText (keyup)="handleSearch(searchText.value)">

我正在努力实现的是handleSearch在用户停止输入后稍微调用一下.

我发现我可以使用lodash's _debounce(),但我还没有找到如何把它放在我的keyUp活动上.

当用户快速点击按钮时，showDialog() 方法会在彼此的顶部显示多次，因此当您关闭它时，它后面还有另一个。我正在寻找一种方法来忽略第二次点击 1 秒而不使用处理程序或检查前一次点击的时间。

//Button that opens a dialog
button.setOnClickListener {
    showDialog()
}

我正在寻找使用 Kotlin 协程或 Kotlin 流程的解决方案以供将来实现。

我有一个围绕React Table组件构建的功能组件，该组件使用Apollo GraphQL客户端进行服务器端分页和搜索。我正在尝试为搜索实现反跳操作，以便一旦用户停止使用该值键入内容，就只对服务器执行一个查询。我已经尝试过lodash的反跳和真棒的反跳承诺解决方案，但仍然针对服务器在搜索字段中键入的每个字符执行查询。

这是我的组件（删除了不相关的信息）：

import React, {useEffect, useState} from 'react';
import ReactTable from "react-table";
import _ from 'lodash';
import classnames from 'classnames';
import "react-table/react-table.css";
import PaginationComponent from "./PaginationComponent";
import LoadingComponent from "./LoadingComponent";
import {Button, Icon} from "../../elements";
import PropTypes from 'prop-types';
import Card from "../card/Card";
import './data-table.css';

import debounce from 'lodash/debounce';

function DataTable(props) {
    const [searchText, setSearchText] = useState('');
     const [showSearchBar, setShowSearchBar] = useState(false);

    const handleFilterChange = (e) => {
        let searchText …

我有一个输入框.用户停止输入后,我想执行HTTP请求并等待结果.

这是一个jsbin

由于jsbin上不允许网络请求,我使用了setTimeout().

var log = console.log.bind(console)

var delayedResults = new Promise(function(resolve) {
  setTimeout(function(){
    resolve('Wooo I am the result!')
  }, 3000);
});

document.querySelector('input').addEventListener('input', _.debounce(async function(){
  log('Doing search')
  var result = await delayedResults
  log('Result is', result)
}), 500);

但是,当我在框中输入时,"正在搜索"会立即显示每个字符 - 我希望它仅在500毫秒到期后出现.

我怎样才能使用去抖并等待？

我有一个Vue组件,它使用多个子组件.在这些子组件上,我有一个观察数据变化并处理这些变化的观察者.我想为此实施去抖动.

    watch: {
    data: {
      handler: function () {
        this.processData()
      },
      deep: true
    }
  },
  methods: {
    processData: debounce(function () {
      console.log(this.id)
    }, 250),

问题是debounce有效,所以它只在最后一个子组件上执行.

我找到了一个debounce函数的解决方案,可以接受额外的id debounceWithId

但问题是,如果我指定此函数如下:

  methods: {
    processData: debounceWithId(function () {
      console.log(this.id)
    }, 250, this.id),

最后一个this.id未定义.

在多个组件中使用去抖动的正确方法是什么,因此该函数会在每个组件上单独触发？

在我的模板中，我有一个字段和两个按钮：

<div class="btn-plus" (click)="add(1)"> - </div>
<div class="txt"> {{ myValue }} </div>
<div class="btn-minus" (click)="add(-1)"> + </div>

在我的组件 .ts 文件中，我有：

add(num) {
    this.myValue +=num;
    this.update(); // async function which will send PUT request
}

该this.update()函数myValue在一个大的 JSON 对象中放入适当的字段并将其发送到服务器。

问题：当用户在短时间内点击加号/减号按钮 10 次时，请求将被发送 10 次。但我只想发送一次请求 - 最后一次点击后 0.5 秒。怎么做？

我正在尝试使用typescript编写去抖动函数。

export function debounce<Params extends any[]>(
  func: (...args: Params) => any,
  timeout: number,
): (...args: Params) => void {
  let timer: NodeJS.Timeout
  return (...args: Params) => {
    clearTimeout(timer)
    timer = setTimeout(() => {
      func(...args)
    }, timeout)
  }
}