为什么我的 Javascript 函数在一段时间后停止工作？答案

【问题标题】：Why does my Javascript Function stop working after a certain period of time?为什么我的 Javascript 函数在一段时间后停止工作？
【发布时间】：2020-12-17 20:34:42
【问题描述】：

首先，我是 Javascript 和 Regex 的新手。在过去的一个月里，我只是在踮起脚尖。我一直在尝试整理以将 url 粘贴到文本输入中，然后自动将其修剪为仅主机名并在我能够按下按钮之前对其进行验证。

我已经让它工作了几次，但我一直遇到同样的问题：一段时间后，它就停止工作了。

我已经重新格式化并清理了几次代码（不过，我确信它仍然很草率，因为我是新手），我可以让它再次工作。但工作一个小时左右后，它停止工作。重新加载页面并没有什么不同。即使重新启动我的计算机也没有什么不同。它只是停止工作。

我唯一的猜测是，我处理这件事的方式一定有什么导致它崩溃或停止的原因。也许是格式问题，也许方法完全有缺陷。我只是还没有足够的知识来诊断它。

希望你们中的一些好人能够指出我的缺陷或指出我如何解决这个问题的正确方向。我已经搜索过，但找不到任何人试图在一个构建中完成我正在做的事情（准备让自己在这里被证明是错误的）。

代码如下：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>

<body>
    
    <input id="notesUrlInput" type="text" placeholder="URL Goes here" pattern="^(?!www\.)[a-zA-Z0-9\-]+\.[a-zA-Z0-9]+$" autocomplete="off">
    <button id="notesExecuteButton" disabled>Execute</button>
    <span id="notesUrlOutput"></span>
    
    <!------------------------------------------------------------------------------->
    
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>      
    <script>


        
        
        
        (function () {
            var timeout = null;
            var notesUrlOutput = document.getElementById("notesUrlOutput");
            var notesExecuteButton = document.getElementById("notesExecuteButton");
            document.getElementById('notesUrlInput').addEventListener('keyup',
                function (e) {
                    clearTimeout(timeout);
                    timeout = setTimeout(
                    function () {
                        rawInput = $('#notesUrlInput').val();
                            cleanInput = rawInput.replace('www.', '');
                            cleanInput = cleanInput.replace('http://', '');
                            cleanInput = cleanInput.replace('https://', '');
                            cleanInput = cleanInput.replace(/\/.*/,'');
                        $('#notesUrlInput').val(cleanInput);
                        if (cleanInput.value == "") {
                            notesUrlOutput.innerHTML = "";
                            notesExecuteButton.disabled = true; return false;
                        } else if(!notesUrlInput.checkValidity()) {
                            notesUrlOutput.innerHTML = "Invalid URL: Please provide a valid URL";
                            notesExecuteButton.disabled = true; return false;
                        } else {
                            notesUrlOutput.innerHTML = "Input OK";
                            notesExecuteButton.disabled = false; return false;
                        }
                }, 400);
            });
        })();
                    
    </script>
</body>
</html>

令人沮丧的是，当我将这段代码粘贴到这里并运行它时，它工作了。我一打开文件，就在浏览器中复制了这个文件。它停止工作。我只是不明白。

【问题讨论】：

我没有测试代码，但是你试过去掉 setTimeout 吗？

标签： javascript regex validation replace event-listener

【解决方案1】：

从您的代码看来，您只想从输入字段中提取域名。

您可以混合使用 JavaScript DOM 调用和 jQuery，这很好。仅使用 jQuery 与 DOM 交互通常更容易。这是用 jQuery 重写的代码：

const cleanRegex = /^https?:\/\/(?:www\.)?(.*)\/.*$/;
const validRegex = /^[\w\-]+(\.[\w]+)+$/;
(function () {
  $('#notesExecuteButton').prop('disabled', true);
  $('#notesUrlInput').on('input', function(event) {
    let val = $(this).val();
    let cleaned = val.replace(cleanRegex, '$1');
    $(this).val(cleaned);
    if(!cleaned) {
      $('#notesUrlOutput').text('');
      $('#notesExecuteButton').prop('disabled', true);
    } else if(!cleaned.match(validRegex)) {
      $('#notesUrlOutput').text('Invalid URL: Please provide a valid URL');
      $('#notesExecuteButton').prop('disabled', true);
    } else {
      $('#notesUrlOutput').text('Input OK');
      $('#notesExecuteButton').prop('disabled', false);
    }
  });
})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<input id="notesUrlInput" />
<button id="notesExecuteButton" style="disabled: disabled;">Go</button>
<div id="notesUrlOutput"></div>

解释：

.on('input') - 每次输入字段发生变化时触发 - val.replace(cleanRegex, '$1') - 清理：去除协议和 www 前缀和 URL 路径（域后的任何文本
cleaned.match(validRegex) - 检查域的有效性
.prop('disabled', true/false) - 添加/删除禁用属性

【讨论】：