JavaScript、LWC、搜索用户停止输入、去抖动

Question

在输入中，用户输入用于搜索产品的搜索短语。我想在用户停止输入后设置搜索。 Here 是一个很好的示例，但不适用于 Lightning Web 组件。当我开始写入搜索输入时，有一个 error：“此页面有错误。您可能只需要刷新它。”

productList.html:

<lightning-input
  type="search"
  class="slds-var-m-bottom_small"
  value={searchKey}
  placeholder="Searching..."
  onchange={handleSearchEvent}>
</lightning-input>

productList.js:

import { LightningElement, wire } from 'lwc';
import findProducts from '@salesforce/apex/ProductMaster.findProducts';

export default class ProductList extends LightningElement {
  searchKey = '';
  timeout = null;

  @wire(findProducts, { searchKey: '$searchKey' })
  products;

  handleSearchEvent(event) {
    const eventValue = event.target.value;
    clearTimeout(timeout);
    timeout = setTimeout(function (eventValue) {
      this.searchKey = eventValue;
      console.clear();
      console.log('handleSearchEvent() -> this.searchKey: ' + this.searchKey);
    }, 1000); // searching after 1s
  }
}

如何设置超时？并且 js 控制台写道：

console.log('handleSearchEvent() -> this.searchKey: ' + this.searchKey);

handleSearchEvent() -> this.searchKey: undefined

Answer 1

问题是您的函数中的 this 绑定需要显式设置：

timeout = setTimeout(function (eventValue) {
      this.searchKey = eventValue;
      console.clear();
      console.log('handleSearchEvent() -> this.searchKey: ' + this.searchKey);
    }.bind(this), 1000);

但也许更简单的方法是使用一个箭头函数，它会隐式绑定 this 我相信：

timeout = setTimeout((eventValue) => {
      this.searchKey = eventValue;
      console.clear();
      console.log('handleSearchEvent() -> this.searchKey: ' + this.searchKey);
    }, 1000);

JavaScript、LWC、搜索用户停止输入、去抖动

JavaScript, LWC, Searching after User to stop typing, debounce

javascript

input

salesforce

debounce

lwc