存储在变量中的JS函数不可调用 Download


我已经为我的网站构建了Typewriter效果，并且我希望提供传递某些Typewriter效果条件的功能，以便仅在该条件成立时才执行。

我试图通过将一个函数传递给构造函数来实现这一点，我想稍后再调用该函数。不幸的是，由于任何原因这都不起作用。您可以在下面找到可复制的示例。

结构如下：

const Typewriter = function(..., condition, ....) {
   ....
   this.condition = condition;
   ....
   this.type()
}

我正在像这样传递函数：

const conditionFunc = function() { ... }

new Typewriter(...., conditionFunc, ...);

当我想稍后在Typewriter.prototype.type()内部调用该函数时，可以使用this访问Typewriter对象，则无法调用它。

type只是一个具有键入效果的功能。

Typewriter.prototype.type = function() {
    // Add char to the element
    this.currValue = this.wordsToPrint.substring(0, this.currValue.length + 1);
    this.element.innerHTML = this.currValue;

    // console.log(this.condition()) gives error....
    setTimeout(() => this.type(), 80);
}

我尝试像这样调用type()内部的函数：this.condition()，但是它说这不是一个函数... 当我尝试this.condition时，它显然会返回函数名称和主体，而不会调用任何内容。

我很生气，曾尝试使用var test = this.condition和test()之类的东西，但这会导致相同的错误...

我真的不知道为什么会出现该错误，因为typeof(this.condition)显然返回了function ...

感谢您的帮助！

我将通过提供脚本代码来尝试给出一些最小的可重现示例：

const Typewriter = function(element, wordsToPrint, condition) {
  this.element = element;
  this.wordsToPrint = wordsToPrint;
  this.condition = condition;
  this.currValue = '';
  this.type();
}

// Method for the typing effect
Typewriter.prototype.type = function() {
  // Add char to the element when condition holds
  if (this.condition()) { // This is the critical point in the code
    this.currValue = this.wordsToPrint.substring(0, this.currValue.length + 1);
    this.element.innerHTML = this.currValue;
  }

  setTimeout(() => this.type(), 80);
}

// Set up Typewriters after DOM is loaded
document.addEventListener("DOMContentLoaded", init);


function init() {
  const someElement = {
    element: document.querySelector("h1"),
    content: document.querySelector("h1").innerHTML
  }

  // Clear text of elements before effect
  someElement.element.innerHTML = '';

  const conditionFunc = function() {
    return true;
  }

  // Create Typewriters
  new Typewriter(someElement.element, someElement.content, conditionFunc);
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
</head>

<body>
  <h1>This should be typed in a Typewriter effect</h1>
</body>

</html>

3 个答案:

答案 0 :(得分：0)

我检查了原始脚本与此处提供的脚本之间的区别，基本上是我有 两个 打字机对象，而一个没有任何条件，所以我将null传递给其构造函数。 （最有可能的方法不是最好的方法，如果JavaScript中有可选参数，则需要通过Google搜索。）

Typewriter.prototype.type()函数显然可同时在两个Typewriters上运行，这就是为什么它试图在条件为this.condition()的Typewriter对象上调用null的原因，从而导致错误。在具有条件功能的其他Typewriter对象上，它工作得很好，但是第一个Typewriter对象已经导致了错误，而第二个对象可以向控制台提供任何输出，因此我认为它根本无法正常工作..

初学者的错误，对此深表歉意。感谢您的所有帮助！

答案 1 :(得分：0)

一旦纠正了一些错误（“ h1和列表中的分隔符不正确的错误语法），它对我有用...请尝试按运行按钮：

const Typewriter = function(element, wordsToPrint, condition) {
   this.element = element;
   this.wordsToPrint = wordsToPrint;
   this.condition = condition;
   this.currValue = '';
   this.type();
}

// Method for the typing effect
Typewriter.prototype.type = function() {
   // Add char to the element when condition holds
   if (this.condition()) {  // This is the critical point in the code
      this.currValue = this.wordsToPrint.substring(0, this.currValue.length + 1);
      this.element.innerHTML = this.currValue;
   }

   setTimeout(() => this.type(), 80);
}

// Set up Typewriters after DOM is loaded
document.addEventListener("DOMContentLoaded", init);
function init() {
   const someElement = {
    element: document.querySelector("h1"),
    content: document.querySelector("h1").innerHTML,
   };

   // Clear text of elements before effect
   someElement.element.innerHTML = '';

   const conditionFunc = function() { return Math.random() > 0.5 ? true : false; }
   // Create Typewriters
   new Typewriter(someElement.element, someElement.content, conditionFunc); 
}
<!DOCTYPE html>
<html>

<head>
   <meta charset="UTF-8">
</head>

<body>
   <h1>This should be typed in a Typewriter effect</h1>
</body>

</html>

底线：使用小提琴：）

如果您仍然有任何问题，请发表评论。

答案 2 :(得分：0)

此外，您可以只将羽毛箭头功能分配给const 

    const myFunc = (arg1, agr2) => { //blah blah }



Similar searches