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

编程问答 2022-05-12

问题描述

在输入中，用户写一个搜索词来搜索产品。我想在用户停止输入后设置搜索。 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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

debounceinputinputjavascriptlwcsalesforcesalesforce