时间戳

首页 > 解决方案 > 如何使元素的功能连续运行或永不结束？

javascript - 如何使元素的功能连续运行或永不结束？

问题描述

您好，我对 JS 和 HTML 还很陌生，正在尝试制作类似于 Monaco Editor 之类的文本编辑器组件的东西。
它是如何工作的——
函数 Ventify() 接受一个元素并添加一个装订线和一个文本区域。所以我在这个函数中做了一个 if 语句来检查 textarea 中的行数并相应地创建排水沟线。我在执行此操作时遇到的问题是该函数仅在加载文本时对文本行进行编号，因为该函数结束了。有没有一种方法可以让函数/if 语句永不结束。
这是该项目的代码笔：https ://codepen.io/chrismg/pen/qgxOxg 。
JS（带 JQuery）：

function Ventify(element){
    element.style.display="flex";
    element.style.flexDirection = "row";
    var gutter = document.createElement("div");
    var textarea = document.createElement("textarea");
    gutter.className = "gutter";
    textarea.className = "ventiEditor";
    gutter.style.width = "100px";
    gutter.style.height = "100%";
    gutter.style.backgroundColor = "#1d252c";

    textarea.style.width = "calc(100% - 100px)";
    textarea.style.overflowY= "scroll";
    textarea.style.whiteSpace = "pre";
    textarea.style.resize = "none";
    textarea.style.height = "100%";
    textarea.style.margin = "0px 0px 0px 0px"
    textarea.style.border = "0px solid rgb(255,255,255)"
    textarea.style.backgroundColor = "#1d252c";
    textarea.value = "\n\n\n\n";
    element.appendChild(gutter);
    element.appendChild(textarea);
    if(gutter.childNodes.length != $(textarea).val().split("\n").length){
        while(gutter.childNodes.length < $(textarea).val().split("\n").length){
            var gutterChild = document.createElement("div");
            gutterChild.style.width = "100%";
            gutterChild.style.color = "rgba(58,74,88,1)"
            gutterChild.style.textAlign = "center";
            gutter.appendChild(gutterChild);
            gutterChild.innerHTML = `${gutter.childNodes.length}`
        }
    }
}
    Ventify(document.getElementsByClassName("container")[0])

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test Ground</title>
    <style>
        html,body{
            height: 100%;
            margin: 0px 0px 0px 0px;
        }
        .container{
            height: 50%;
        }
    </style>
</head>
<body>
    <div class="container"></div>
</body>
</html>

标签： javascripthtml

解决方案

更好的方法是在输入或文本区域上使用 onKeydown（或类似事件）事件。就像下面的例子

function handle(){
  let element = document.getElementById('inp').value;
  console.log(element, 'called on change')
}
<input id='inp' onKeydown=handle() />

在您的代码中可以使用 setInterval。当你想停止时，清除间隔。

setInterval(Ventify(document.getElementsByClassName("container")[0]),200)

密码笔

推荐阅读