标签: debouncing

我有一个小脚本,用于监视文件的变化inotifywait.当某些内容发生变化时,会通过一个过程(编译,压缩,重组等)发送一批文件,这些过程大约需要十秒钟才能运行.

请考虑以下示例:

touch oli-test
inotifywait -mq oli-test | while read EV; do sleep 5; echo "$EV"; done

如果你touch oli-test在另一个终端上运行几次,你会看到每个循环在它继续前完成.这种情况对我来说非常真实.如果我忘记在文件处理过程中忘记保存文件,或者发现错误,那么事件就会叠加,我等待几分钟.

令我感到震惊的是,有两种技术可以使这个工作流程更加客观.我不确定什么是最简单或最好的,所以我提出了两个:

1. 中断以前的运行,并立即重启.脚本化进程目前只是一组内联命令.我可以将它们分解为Bash函数,我并不是想要将它们打破得更远.

2. 对等待处理的事物列表进行去抖动,以便如果一次发生五个事件(或者它已经处理过),它只会再次运行.

(或两者......因为我确定有两种情况都有用的情况)

我也对不同的方法持开放态度,inotifywait但他们需要给我相同的结果并在Ubuntu上工作.

这是对我的理解的检查requestAnimationFrame.我需要一个去抖动功能,因为每次调整窗口大小时我都会做一些DOM交互,而且我不想让浏览器超载.典型的去抖功能只会在每个间隔调用一次传递函数; 间隔通常是第二个参数.我假设对于大量的UI工作,最佳间隔是不会使浏览器过载的最短时间.在我看来,这正是requestAnimationFrame将要做的:

var debounce = function (func, execAsap) {
   var timeout;

  return function debounced () {
    var obj = this, args = arguments;
    function delayed () {
      if (!execAsap)
        func.apply(obj, args);
      timeout = null; 
    };

    if (timeout)
      cancelAnimationFrame(timeout);
    else if (execAsap)
      func.apply(obj, args);

    timeout = requestAnimationFrame(delayed); 
  };
}

上面的代码是从上面的debounce链接直接剽窃,但使用requestAnimationFrame而不是setTimeout.根据我的理解,这将尽快排队传入函数,但任何比浏览器更快处理的调用都将被删除.这应该产生最平滑的交互.我是在正确的轨道上吗？还是我误会了requestAnimationFrame？

(当然这仅适用于现代浏览器,但是requestAnimationFrame有简单的polyfill,它们可以回退到setTimeout.)

我有一个需要去抖动的字段的onchange事件,我正在使用下划线,但是当我使用debouncer时,传递给React处理程序的事件似乎已过时.

<div className='input-field'>
  <input onChange={_.debounce(this.uriChangeHandler.bind(this), 500)} id='source_uri' type='text' name='source_uri' autofocus required />
  <label htmlFor='source_uri'>Website Link</label>
</div>

uriChangeHandler(event) {
    event.preventDefault();
    let uriField = $(event.target);
    let uri = uriField.val();
    this.setState({
        itemCreateError: null,
        loading: true
    });
    this.loadUriMetaData(uri, uriField);
}

我收到这个错误: Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're calling preventDefault on a released/nullified synthetic event. This is a no-op. See https://fb.me/react-event-pooling for more information.

使用onchange w/o debouncer工作正常.

我非常感谢lodash的去抖和油门功能.我相信我很好地理解了用例并且已经实现了几十次.

但是,根据要求,带有参数的_.debounce函数可能存在重大且难以捕获的错误.这是以下内容:

假设您有一个调用去抖函数debounceFn,该函数接受一个参数并且具有1000ms的去抖动间隔.

• 100毫秒: debounceFn(1)
• 200毫秒: debounceFn(2)
• 300毫秒: debounceFn(2)
• 400毫秒: debounceFn(1)
• 500毫秒: debounceFn(1)

子函数最终将使用1的参数调用.这对于仅关注最后一个值的resize事件非常有用,但如果根据参数需要单独的debounced队列,该怎么办？也就是说,不是使用参数1调用的进程,而是使用参数1和参数2调用进程,但只调用一次(因为它们都是去抖动的).

作为扩展且稍微复杂的示例,请考虑下面的参数组合,其中组合生成唯一队列.

实际产量:

• a: lime b: kiwi

期望的输出(前两个输出的顺序可以翻转)

• a: apple b: banana
• a: apple b: orange
• a: lime b: kiwi

var process = function(a, b) {
  document.writeln('a: ' + a + ' b: ' + b);
};

var debounceProcess = _.debounce(function(a, b) {
  process(a, b);
}, 1000);


setTimeout(function() {
  debounceProcess('apple', 'orange');
}, 100);
setTimeout(function() {
  debounceProcess('apple', 'banana');
}, 200);
setTimeout(function() {
  debounceProcess('apple', 'orange');
}, 300); …

我想知道突变何时停止被调用。因此我正在实施去抖。然而我的 console.log('*****Debounced ****'); 从未被调用过。

您能帮助我了解我做错了什么吗？

var target = document.body;
var observer = new MutationObserver(function(mutations) 
{
    mutations.forEach(function(mutation) 
        {
            for (var i = 0; i < mutation.addedNodes.length; i++) 
                {
                    var item = mutation.addedNodes[i];
                    console.log(item);
                    myCustomFunction
                }
        });
});         

observer.observe(document, {childList: true, subtree: true});

var myCustomFunction = debounce(function() 
               {
                   console.log('*****Debounced ****');
                   //call some method do more work etc
                }, 500);

function debounce(func, wait, immediate) 
{
var timeout;
return function() {
    var context = this,
        args = arguments;
    var later = function() {
        timeout …

我需要一个简单的 debounce 函数，立即数总是为真。
没有求助于 lodash 并在有人可以解释 Javascript 中的“去抖动”功能的帮助下，我实现了它如下，

function debounce(func, wait) {
    var timeout;
    return function() {
        if (!timeout) func.apply(this, arguments);
        clearTimeout(timeout);
        timeout = setTimeout(()=>{timeout = null}, wait);
    };
};

它按预期工作，直到我需要去抖动 axios 请求。假设我有一个去抖动的 axios 方法，我希望调用方法像往常一样，这意味着我的去抖动 axios 方法应该返回我相信的承诺。

   //the calling method should not change   
   debounced_axios().then(res => {...}).catch(err => {...}) 

原始 debounce 实现的本质是在等待时间范围内只运行一次func ，但是我如何在等待时间范围内只返回一个承诺？

然后我想出了以下解决方案

all_timers = {}
function debounce_axios(input, wait) {
    return new Promise((resolve, reject) => {
        let timer = all_timers.[input] //check if it is …

const debounce = (func) => {
    return (arg) => {
        let timeoutId;
        if (timeoutId){
            clearTimeout(timeoutId);
        }
        timeoutId = setTimeout(() => {
            func(arg);
        }, 1000);
    }
}

function hello(name){
    console.log("hello " + name);
}

input.addEventListener("input", debounce(hello));

在这个例子中，我该如何去抖并hello使用 debounce 和 name 调用该函数"Brian"。

在代码行 2 上，return (arg) => {在变量中传递参数的代码是什么？

我知道它debounce(hello);调用了 debounce 函数，但是我该如何传递一个变量以便将其存储在中(arg)？

我有一个材质 UI 文本字段，其中包含一个onChange. 这onChange，就拿来event执行函数了handleOnChange。handleOnChange在当前的实现中，每次更改时都会执行该函数event。

是否可以debounce直接在 2000ms 后执行该函数event？

我的文本字段

<TextField
  onChange={
    event =>
      handleOnChange(
      event.target.value,
      firstValue,
      secondValue,                            
    )
/>

我的功能

const handleOnChange = (value, firstValue, secondValue) => {
  ...do something..
}

我尝试了以下操作，但handleOnChange每次event更改时仍然会触发，而不是在 2000 毫秒后触发。

<TextField
  onChange={
    event =>
      _.debounce(handleOnChange(
      event.target.value,
      firstValue,
      secondValue,                            
    ), 2000)
/>

我能够继续实现我的异步 udp 服务器。但是，此错误出现两次，因为我的变量数据的类型*mut u8不是Send：

error: future cannot be sent between threads safely
 help: within `impl std::future::Future`, the trait `std::marker::Send` is not implemented for `*mut u8`
note: captured value is not `Send`

和代码（MRE）：

use std::error::Error;
use std::time::Duration;
use std::env;
use tokio::net::UdpSocket;
use tokio::{sync::mpsc, task, time}; // 1.4.0
use std::alloc::{alloc, Layout};
use std::mem;
use std::mem::MaybeUninit;
use std::net::SocketAddr;

const UDP_HEADER: usize = 8;
const IP_HEADER: usize = 20;
const AG_HEADER: usize = 4;
const MAX_DATA_LENGTH: usize = (64 …

我这里有一个输入字段，在每种类型上，它都会调度一个 redux 操作。我放置了一个 useDebounce 以便它不会很重。问题是它说Hooks can only be called inside of the body of a function component.What is the theproper way to do it?

使用超时

import { useCallback, useEffect, useRef } from "react";

export default function useTimeout(callback, delay) {
  const callbackRef = useRef(callback);
  const timeoutRef = useRef();

  useEffect(() => {
    callbackRef.current = callback;
  }, [callback]);

  const set = useCallback(() => {
    timeoutRef.current = setTimeout(() => callbackRef.current(), delay);
  }, [delay]);

  const clear = useCallback(() => {
    timeoutRef.current && clearTimeout(timeoutRef.current); …