标签: debouncing

David Walsh在这里有一个很好的去抖动实现。

// 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. If `immediate` is passed, trigger the function on the
// leading edge, instead of the trailing.
function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, …

目前,我使用以下代码来听取以下内容的变化Sheet1!A1:B2:

function addEventHandler() {
    Office.context.document.bindings.addFromNamedItemAsync("Sheet1!A1:B2", "matrix", { id: "myBind" }, function (asyncResult) {
        Office.select("binding#myBind").addHandlerAsync(Office.EventType.BindingDataChanged, onBindingDataChanged2016);
    })
}

function onBindingDataChanged2016(eventArgs) {
    Excel.run(function (ctx) {
        var foundBinding = ctx.workbook.bindings.getItem(eventArgs.binding.id);
        var myRange = foundBinding.getRange();
        myRange.load(["address", 'values']);
        return ctx.sync().then(function () {
            console.log(JSON.stringify({ "address": myRange.address, "value": myRange.values }));
            // costly reaction
        })
    })
}

因为我对改变的反应是非常昂贵的,所以我只想在真正需要时才采取这种做法.我有两个问题:

1)如果我想听多范围,是否可以只定义一个监听器"Sheet1!A1:B2, Sheet1!A9:B10, Sheet1!A100:B120"？我是否必须为每个范围添加一个处理程序？

2)是否可以表达I listen only to the change of VALUES,而不是格式等？

可选问题:

是否有可能在某处指定去抖？例如,

1. 我们初始化一个时钟 0

2. 如果触发了侦听器,我们会记录binding id更改,并将时钟设置为0 …

使用 lodash 的debounce()，我等待 10 秒，然后在我的应用程序状态中设置搜索词。但我想searching在去抖之前设置应用程序的状态：

onChangeText(text) {
    setSearching(true);
    setSearchTerm(text);
}
render(){
    return(
        <TextInput style={s.input}
            onChangeText={_.debounce(this.onChangeText, 10000, {'leading':true} )}
        />
    )
}

从文档来看，这应该在超时的前沿运行，直到事件停止指定的等待时间。实际行为就像根本没有去抖一样，事件每次在调用时都会运行，没有 10 秒的缓冲区。有任何想法吗？删除{'leading':true}确实会适当地进行去抖，但我需要在 10 秒之前在我的应用程序中设置状态。

寻找一些关于如何模拟的建议.cancel在 lodash 的反跳中模拟该方法的建议。

我有一个正在调用的函数debounce，然后利用返回的去抖值来调用debouncedThing.cancel().

我能够debounce在测试中很好地模拟，除了调用我的函数时.cancel()。

在我目前正在做的单元测试的顶部：

jest.mock('lodash/debounce', () => fn => fn));

除了我打电话的地方之外，上面的模拟工作得很好debouncedThing.cancel()。在那些测试中，我收到一个错误debouncedThing.cancel()在这些测试中，我收到一个不是函数的

我使用 debounce 的伪代码如下所示：

const debouncedThing = debounce(
  (myFunc, data) => myFunc(data),
  DEBOUNCE_DELAY_TIME,
);

const otherFunc = () => {
 /* omitted */
 debouncedThing.cancel();
}

有了这个debounce功能：

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

有人可以解释为什么我应该使用fn.apply(context,args)而不是fn()仅仅使用吗？

我知道.apply会改变上下文var context = this并使上下文始终与fn(). 我找不到使用fn()并fn.apply(context, args)给出不同结果的场景。

有人可以举个例子吗？

我使用react-hook-forms 设置了以下受控组件。

          <Controller
            control={control}
            name={"test"}
            render={({ field: { onChange, value, name } }) => (
              <Dropdown
                name={name}
                value={value}
                handleChange={onChange}
                options={foodCategories()}
              />
            )}
          />

我想调用防抖功能，并且尝试执行以下操作：

            handleChange={debounce(onChange, 500)}

但我不断收到错误抛出：

This synthetic event is reused for performance reasons, Objects are not valid as a React child (found: object with keys {dispatchConfig, _targetInst, nativeEvent, type, target, currentTarget, eventPhase, bubbles, cancelable, 

如何在受控反应钩子表单组件上调用去抖？

LoDash的防抖动接受一个选项maxWait.

来自文档:

[options.maxWait](数字):func允许在调用之前延迟最长时间.

我很困惑,是不是和使用油门一样？有什么不同？

在我们的应用程序中，我们公开了供外部服务使用的回调路由。当我们收到回调时，我们使用客户端/浏览器端的Eventsource和服务器端的抽筋向客户端订阅者发布更新。但是，有时，我们会受到来自此外部服务的回调请求的轰炸，这导致我们向客户端发布了很多更新。在Rails端是否有一种类似于javascript防反跳功能的方法，可以在收到的回调之间等待设置的时间来发布消息？

我们已经在使用sidekiq +线程，因此欢迎使用这些工具的建议。

我正在学习ReactJS并遇到以下问题.我有一个联系人搜索输入,并希望在用户停止输入后1000ms内处理它.我为此目的使用去抖功能:

import React, { Component}  from 'react';
import ReactDOM  from 'react-dom';
import './index.css';
import {debounce} from 'lodash';

const contacts = [
    {
        id: 1,
        name: 'Darth Vader',
        phoneNumber: '+250966666666',
        image: 'img/darth.gif'
    }, {
        id: 2,
        name: 'Princess Leia',
        phoneNumber: '+250966344466',
        image: 'img/leia.gif'
    }, {
        id: 3,
        name: 'Luke Skywalker',
        phoneNumber: '+250976654433',
        image: 'img/luke.gif'
    }, {
        id: 4,
        name: 'Chewbacca',
        phoneNumber: '+250456784935',
        image: 'img/chewbacca.gif'
    }
];

class Contact extends React.Component {
    render() {
        return (
            <li className="contact">
                <img className="contact-image" src={this.props.image} width="60px" …

我想使用 Observable<string[]> 在我的 Angular 应用程序的组件上逐渐显示内容。

1. 在TypeScript方面我声明了这一点：

export class ResultComponent implements OnInit{
 
 message: string = 'my message for user';
 spreadedMessage$: Observable<string> = from(this.message);
 progressiveMessage:string = "";

 ngOnInit() {
    let interval = 1
    this.obsMessage$
      .pipe(
        tap((letter) => {
           delay(35*interval),
           this.progressiveMessage += letter;
          interval++
        })
      )
      .subscribe();
    }
}

2. 将ProgressiveMessage绑定到模板

<div> {{ progressiveMessage }} </div>

我的完整代码清单可以在这里找到

我尝试了第二种方法，效果很好，如下所示，但我想了解我使用Observable来取得进展有什么问题。

我的替代解决方案：

1. 变成spreadedMessage$: Observable<string> = from(this.message);​spreadedMessage: string[] = [...this.message];

2. 在方法上声明了这一点OnInit()：

for (let i: number = 0; …