标签: debouncing

我想推迟在事件上执行一些代码.使用标准setTimeout功能和插件去抖(链接到去抖动)之间究竟有什么区别？

这是一个例子 setTimeout:

var timeout;
$(window).on("scroll", function() {

    clearTimeout(timeout);
    timeout = setTimeout(function() {

        doSomethingFunction();

    }, 500);

});

这是debounce的一个例子:

$(window).on("scroll",

    $.debounce(500, doSomethingFunction)

);

当然,对于去抖,代码更短但是还有其他好处吗？ 哪一个会更快？

我已经编写了一些代码,每次点击按钮时必须逐个打开LED(在一个圆形中),但有时只需点击一下按钮就可以点亮下一个指示灯而不是一个随机点亮四个指示灯.这就像一个或多个LED跳过它.我认为这个问题是由于时钟速率设置错误或上升/下降EXTI跳闸错误设置造成的.董事会:STM32DISCOVERY

periph.h

#ifndef PERIPH_H
#define PERIPH_H

#include "stm32f4xx_gpio.h"
#include "stm32f4xx_rcc.h"
#include "misc.h"
#include "stm32f4xx_exti.h"
#include "stm32f4xx_syscfg.h"

void Initialize_GPIO_LEDS(void);
void Initialize_GPIO_Button(void);
void Initialize_EXTI0_PA(void);
void Initialize_NVIC(void);

typedef enum
{ 
  GPIO_LED_Green         = GPIO_Pin_12,
  GPIO_LED_Yellow        = GPIO_Pin_13,
  GPIO_LED_Red           = GPIO_Pin_14,
  GPIO_LED_Blue          = GPIO_Pin_15
}GPIO_LED_TypeDef;

void GPIO_LED_On(GPIO_LED_TypeDef GPIO_LED_x);
void GPIO_LED_Off(GPIO_LED_TypeDef GPIO_LED_x);
void GPIO_LED_All_On(void);
void GPIO_LED_All_Off(void);

#endif /* PERIPH_H */

PERIPH.C

#include "periph.h"

GPIO_InitTypeDef GPIO_LEDS;
GPIO_InitTypeDef GPIO_Button;
EXTI_InitTypeDef EXTI0_PA;
NVIC_InitTypeDef NVIC_Struct;

void Initialize_GPIO_LEDS(void)
{
    RCC_AHB1PeriphClockCmd(RCC_AHB1Periph_GPIOD, ENABLE);

    GPIO_LEDS.GPIO_Pin = GPIO_Pin_15 | GPIO_Pin_14 | GPIO_Pin_13 | GPIO_Pin_12;
    GPIO_LEDS.GPIO_Mode …

我有这样的代码:

var originalFunction = function() {
    return 'some value';
};

var debouncedFunction = _.debounce(originalFunction, 3000);

console.log('debouncedFunction() result: ', debouncedFunction());

console.log('originalFunction() result: ', originalFunction());

(codepen链接)

控制台的结果是:

debouncedFunction() result:  undefined 

originalFunction() result:  some value

如您所见,去抖动功能不会返回任何内容.据我所知,它是由去抖动功能中的内部定时器引起的,但它是否存在？

我想在 ember 应用程序中的搜索输入中添加去抖功能。我在使用去抖方法时遇到问题。

我的搜索如下所示：

{{input type="search"
         placeholder="Search by XYZ"
         value=search
         id="search"
}}

我的路线文件：

export default Ember.Route.extend({
    queryParams: {
    search:{refreshModel: true}
}

我的控制器文件：

export default Ember.Controller.extend({
    search: "",

使用angular 7和rxjs 6：

<input (input)="onChange($event.target.value)">

为什么以下不去抖动？

onChange(val: string) {
  of(val)
    .pipe(        
      debounceTime(300)        
  ).subscribe(valx => {
    console.log(valx);
  });
}

但这确实：

  searchTerm$: Subject<string> = new Subject();

  this.searchTerm$.pipe(      
    debounceTime(300),    
  ).subscribe(val => {
   console.log(val);
  });


onChange(val: string) {   
  this.searchTerm$.next(val);
}

我正在寻找一个与 类似的操作符debounce(ms)，但它触发第一个事件，然后等待ms，然后触发第一个事件，依此类推。

基本上，我想过滤彼此发生的时间非常接近的事件（就时间而言），但不等待最后一个，而是选择第一个。

有没有这样的运算符，或者说制作一个并不难？

我需要一个带有去抖搜索的输入字段，并且值应该从父组件传递。但是当从父组件传递值时它不起作用。正确的实施方法是什么？

Codesandbox 示例https://codesandbox.io/embed/debounce-input-owdwj

具有去抖功能的文本字段

class MyTextField extends Component {
  search = _.debounce(event => {
    this.props.onChange(event.target.value);
  }, 300);

  handleChangeInput = event => {
    event.persist();

    this.search(event);
  };

  render() {
    return (
      <TextField
        value={this.props.value}
        placeholder="type"
        onChange={this.handleChangeInput}
      />
    );
  }
} 

存储文本字段值的父组件

class Form extends Component {
  state = {
    value: ""
  };

  handleChangeInput = value => {
    this.setState({
      value
    });
  };

  render() {
    return (
      <div>
        <h2>{this.state.value}</h2>
        <MyTextField
          value={this.state.value}
          onChange={this.handleChangeInput}
        />
      </div>
    );
  }
}

我试图更深入地研究 rxjs ，发现一个问题，我试图去抖的输入字段在每次按键时调度一个事件，去抖只保存输出，但会产生一个树，如下所示：

a
as(delay - waits 200ms, then fires the rest synchronously)
asd
asdf
asdfg 
....

相同的代码在类组件中按预期工作（/sf/answers/3101059741/），但无法理解为什么它不适用于无状态组件。这是一个示例： https: //stackblitz.com/edit/react-hzhrmf - 您可以看到每次击键都会触发 useState 更新。

多谢。

如果我返回一个函数，useEffect我可以确定该函数将在组件卸载时运行。但 React 似乎在调用我的卸载函数之前擦除了本地状态。

考虑一下：

function Component () {

  const [setting, setSetting] = useState(false)

  useEffect(() => {

    setSetting(true)

    // This should be called when unmounting component
    return () => {

      console.log('Send setting to server before component is unmounted')
      console.log(setting) // false (expecting setting to be true)
      
    }
  }, [])
  
  return (
    <p>Setting is: {setting ? 'true' : 'false'}</p>
  )
}

任何人都可以确认预期的行为是应该擦除组件状态吗？而且，如果这是正确的行为，那么如何在卸载组件之前将当前组件状态发送到服务器？

为了提供一些上下文，我正在消除对服务器的发布请求，以避免每次用户更改设置时都会触发它。去抖动效果很好，但我需要一种在用户离开页面后触发请求的方法，因为排队的去抖动方法将不再从未安装的组件中触发。

有没有办法保留调用去抖函数的所有参数，将它们保存在队列中，然后触发单个批处理操作？

例如：

const debounceWithQueue = _.debounce(myFn, 1000);

debounceWithQueue(1);
debounceWithQueue(2);
debounceWithQueue(3);

一秒钟过去后，我希望我的函数myFn使用参数执行[1, 2, 3]

myFn([1, 2, 3]);

另外，如果 1 秒过去或队列达到一定大小，是否可以触发（记录 debounceWithQueue 函数被调用的次数）