时间戳

首页 > 解决方案 > 存储在变量中的JS函数不可调用

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

问题描述

我已经为我的网站构建了一个打字机效果，我想提供为某些打字机效果传递一些条件的能力，这样它们只有在条件成立时才会执行。

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

结构如下：

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

我正在像这样传递函数：

const conditionFunc = function() { ... }

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

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

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>

标签： javascriptfunction

解决方案

一旦纠正了一些错误（“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>

底线：使用小提琴:)

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

推荐阅读