时间戳

首页 > 解决方案 > setTimeout 内的函数调用未执行

javascript - setTimeout 内的函数调用未执行

问题描述

我正在delayFilter()对输入框的 keyup 执行该功能。我想在用户停止输入并运行该功能后延迟 1 秒filterProducts()。但是，在filterProducts()setTimeout 内部执行时，我收到控制台错误“this.filterProducts 不是函数”。此函数在 setTimeout 之外被正常调用。为什么会抛出这个错误？

  delayFilter() {
    let timeout = null;
    clearTimeout(timeout);

    timeout = setTimeout(function() {
      this.filterProducts();
    }, 1000);
  }

  filterProducts() {
    //do stuff
  }

标签： javascripttypescript

解决方案

那是因为这些，this 在回调内部，并没有引用外部的对象。

尝试这个：

delayFilter() {
    let timeout = null;
    clearTimeout(timeout);
    let self = this;
    timeout = setTimeout(function() {
      self.filterProducts();
    }, 1000);
  }

  filterProducts() {
    //do stuff
  }

你也可以试试箭头功能。原因可以看这里：https ://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

箭头函数表达式是正则函数表达式的语法紧凑替代方案，尽管它没有绑定到 this、arguments、super 或 new.target 关键字。

delayFilter() {
    let timeout = null;
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      this.filterProducts();
    }, 1000);
  }

  filterProducts() {
    //do stuff
  }

推荐阅读