如何用Svelte去抖/踩油门？

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>

这里简化了REPL示例.