Question

所以我现在有：

App.html

<div>
  <input on:input="debounce(handleInput, 300)">
</div>

<script>
  import { debounce } from 'lodash'

  export default {
    data () {
      name: ''
    },

    methods: {
      debounce,
      async handleInput (event) {
        this.set({ name: await apiCall(event.target.value).response.name })
      }
    }
  }
</script>

得到错误Uncaught TypeError: Expected a function at App.debounce。这来自Lodash所以看起来Svelte的方法似乎没有通过。

额外额外修改

我目前如何实现目标的额外背景：

oncreate () {
  const debounceFnc = this.handleInput.bind(this)

  this.refs.search.addEventListener('input', debounce(debounceFnc, 300))
}

Answer 1

这个方法本身应该被去抖 - 所以不要在每个输入事件上调用debounce，而是将handleInput设置为去抖动方法：

<div>
  <input on:input="handleInput(event)">
</div>

<script>
  import { debounce } from 'lodash'

  export default {
    data () {
      return { name: '' };
    },

    methods: {
      handleInput: debounce (async function (event) {
        this.set({ name: await apiCall(event.target.value).response.name })
      }, 300)
    }
  }
</script>

Simplified REPL example here.

Answer 2

接受的答案对Svelte v1有效。对于v3，您可以使用以下代码实现相同的目的：

<input placeholder='edit me' bind:this={input}>
<p>name: {name}</p>

<script>
  import { onMount } from "svelte"
    import { debounce } from 'lodash-es'
    var name="", input;
    onMount(()=>{
        input.addEventListener('input', debounce((e)=>{name=e.target.value}, 250))
    })
</script>

如何用Svelte去抖/踩油门？

2 个答案: