标签: debouncing

请参阅http://jsfiddle.net/5MvnA/2/和控制台.

Fs应该少于Ks,但根本没有Fs.

我得到了去抖动代码

function debounce(fn, delay) {
  var timer = null;
  return function () {
    var context = this, args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function () {
      fn.apply(context, args);
    }, delay);
  };
}

从这里http://remysharp.com/2010/07/21/throttling-function-calls/

请注意我是否做错了？

我有一个用Angular6编写的复杂计算器应用程序，该应用程序基于ngModelChange事件中的多个输入来计算结果，并直接在图表中显示这些结果。计算是在服务器端完成的。现在，我想添加一个反跳时间，这样服务器在按下每个键时都不会收到请求。

我在ngModelChange中触发的计算方法如下所示：

async calculate(){
 if(this.checkInputs()){
   try{
     let returnDto = await this.webApiService.calculate(new CalculatorInputDto(this.model)).toPromise();
     this.outputCalculate.emit(returnDto);
   }
   catch(e){
     console.log(e);
   }
}

而我的服务方式：

calculate(dto: CalculatorInputDto): Observable<any> {
 let url = this.baseUrl + "calculate";
 return this.http.post(url, JSON.stringify(dto), this.options)
    .pipe(
        debounceTime(5000),
        map((res => res.json())),
        catchError(error => this.handleError(error))
     );
}

如您所见，我已经在我的服务中尝试了debounceTime（5000），但似乎没有任何改变。

有谁知道我该如何解决这个问题？

在下面的代码中,为什么ISR2永远不会运行？

const int in = 19;
const int LED = 9;
int flag;
void setup() {
    pinMode(in, INPUT_PULLUP);
    pinMode(LED, OUTPUT);
    attachInterrupt(digitalPinToInterrupt(in), ISR2, RISING);
    attachInterrupt(digitalPinToInterrupt(in), ISR1, FALLING);

}
void  loop() {
    if (flag) {delay (100); flag = false;}// debounce
}
void ISR1(){
    digitalWrite(LED, LOW);
    // Turn Off the motor, since, Limit Switch was engaged
    flag = true;
}
void ISR2(){ // Limit Switch was disengaged. 
    digitalWrite(LED, HIGH);
    delay(100); // Debounce, so I do not receive spurious FALLING edges from …

我在 Angular2 中有一个反应式表单设置。在组件中，我订阅表单控件的值更改，防抖时间为 500 毫秒，如下所示：

myForm.get("myField").valueChanges.debounceTime(500).subscribe(...);

如果值是由代码而不是用户更改的，是否有办法跳过去抖时间？或者有没有办法将这两个事件分开？

我正在使用 RxSwift 进行反应式编程，并想测试我的视图模型。我有这样的去抖动：

在视图模型中：

let personNameMessage = input.personName.debounce(0.5).map { name -> String in
    return "Person Name = \(name)"
}
return Driver.just(personNameMessage)

然后在测试用例中：

let scheduler = TestScheduler(initialClock: 0)
let personNameInput = scheduler.createHotObservable([next(100, "John Doe")])
let personObserver = scheduler.createObserver(String.self)
output.personNameWelcome
    .asObservable()
    .subscribe(personObserver)
    .disposed(disposeBag)

scheduler.start()

print(observer.events)

但它没有发出该事件。我尝试添加scheduler.advanceBy(550)后scheduler.start()但结果是一样的。

请帮忙。

谢谢。

我有一个场景，我需要在输入完成后两秒调度一个操作。（假设用户在没有 2 秒间隔的情况下输入 1000，因此我需要仅在输入 1000 后以及 2 秒后调度操作）。

以前我使用debounce-promise来做这样的事情，我需要从 API 获取下拉列表，但为此我直接在组件中使用带有 AJAX 调用的库。它工作正常。

现在我需要发送这样的动作。

  // should be dispatched only for the last request
  const getRateReq = dispatch(getRates());

  const getRate = debounce(getRateReq, 2000, {
    leading: false,
  });

  const onChange = (e) => {
     setValue(e.target.value);
     getRate(e.target.value);
  }

现在，该操作仅在完成键入两秒后调度。但随后它会发出 1、10、100、1000 的所有请求（即使输入 1000 时没有两秒间隔）。我怎样才能解决这个问题并只为 2 秒内的最后一个输入调度一个操作？

任何帮助，将不胜感激。谢谢

编辑：添加了基本的 onChange 功能

在我的 React Hooks 应用程序中，我需要让用户在输入字段中键入 1000 毫秒。当 1000 毫秒到期时，将发送带有输入值的 API 请求。

<input type='text' name='name' className='th-input-container__input' onChange={evt => testFunc2(evt.target.value)} />

该值设置为testFunc2(evt.target.value)：

const testFunc2 = useCallback(debounce((text) => setNameFilter(text), 1000), []);

一旦nameFilter设置为新值，useEffect就会发出 API 请求，因为nameFilter它是依赖项。这样，仅使用最终的用户输入而不是每个击键值来查询 API，但输入仍不受控制。当我将当前nameFilter值添加到输入时，value={nameFilter}用户无法在输入中键入，并且输入仅接收最后键入的字符。

如何让用户输入的字符显示在输入中？

我正在我的应用程序中实现搜索功能，我想在按键时实现去抖时间。谁能帮我解决这个问题吗

超文本标记语言

<div class="mt-4">
    <div class="form-group has-search">
      <span class="fa fa-search form-control-feedback"></span>
      <input type="search" class="form-control" [(ngModel)]="searchKeywords" (keyup)="getSmartSearchValues(searchKeywords)" (search)="clearSearch()" placeholder="Search here">
    </div>
  </div>

我已经尝试过这个，但它显示错误

  searchTextChanged = new Subject<string>();

ngOnInit(): void {
    this.subscription = this.searchTextChanged
    .debounceTime(1000)
    .distinctUntilChanged()
    .mergeMap(search => this.getSmartSearchValues('', ''))
    .subscribe(() => { });
    this.getAllData();
    if (this.CoffeeItemList.length === 0) {
      this.empty = true;
    }
    this.getItemsCount('');
  }

错误

Property 'debounceTime' does not exist on type 'Subject<string>'.
Property 'subscription' does not exist on type 'AppComponent'

import { useEffect, useState } from 'react';

export default function useDebounce(text: string, delay: number) {
  const [value, setValue] = useState('');

  useEffect(() => {
    const timerId = setTimeout(() => {
      setValue(text);
    }, delay);
    return () => {
      clearTimeout(timerId);
    };
  }, [text, delay]);
  return value;
}

我曾经制作和使用useDebounce钩子。然而，useDebounce在resize事件中使用存在一些问题。必须useDebounce hook在组件的顶部运行，因为它在内部使用了 useEffect。但是，调整大小函数设置为在 useEffect 上运行，如下所示。

另外，上面的代码将值作为一个因素，但我认为我们需要将其作为回调接收才能使用下面的代码。

  useEffect(() => {
    const handler = () => {
      if (liRef.current) setWidth(liRef.current.clientWidth);
    };

    window.addEventListener('resize', handler);
    return () => window.removeEventListener('resize', handler);
  }, []);

如何使用上面的代码来利用现有的useDebounce？

我目前正在学习 Javascript 中的去抖动，并且遇到了两种编写工作原理相同的去抖动函数的方法。一种是像常规函数一样简单的函数，另一种是每个人似乎都使用的复杂函数。

版本1：

@index.html

<input type="text" oninput="betterFunction()">

@script.js

function getData() {
  console.log('Data Fetched')
}

function debounce(callback, delay) {
  let timer
  return function() {
    clearTimeout(timer)
    timer = setTimeout(() => {
      callback();
    }, delay)
  }
}

const betterFunction = debounce(getData, 1000)

版本2：

@index.html

<input type="text" oninput="debounce()">

@script.js

let timer

function debounce() {
  clearTimeout(timer)
  timer = setTimeout(() => {
    console.log('Data Fetched');
  }, 1000)
}

如果这两种去抖方法都给出相同的结果，那么它们之间有什么区别？PS：令我惊讶的是我从未见过有人使用“版本2”，当然我一定是错了。有人可以解释一下这些差异吗？