为什么我的Javascript Function在一段时间后停止工作？

Question

First things first, I'm brand new to Javascript and Regex.首先，我是 Javascript 和正则表达式的新手。 I've only been dipping my toes in this past month.在过去的一个月里，我只是在踮起脚尖。 I've been trying to put together away to paste a url into a text input then automatically trim it down to just the host name and validate it before I'm able to push the button.我一直在尝试将 url 粘贴到文本输入中，然后自动将其修剪为主机名并在我能够按下按钮之前对其进行验证。

I've gotten it working a few different times but I keep running into the same issue: After a certain period of time, it simply stops working.我已经让它工作了几次，但我一直遇到同样的问题：一段时间后，它就停止工作了。

I've reformatted and cleaned up the code a few times (though, I'm sure it's still very sloppy because I'm new at this) and I can get it working again.我已经重新格式化并清理了几次代码（不过，我确信它仍然很草率，因为我是新手），我可以让它再次工作。 But after an hour or so of working, it stops working.但工作一个小时左右后，它停止工作。 Reloading the page doesn't make a difference.重新加载页面并没有什么不同。 Even restarting my computer doesn't make a difference.即使重新启动我的计算机也没有什么不同。 It simply stops working.它只是停止工作。

My only guess is that there must be something about the way I'm going about this which is causing it crash or stall out.我唯一的猜测是，我处理这件事的方式一定有什么导致它崩溃或停止的原因。 Perhaps a formatting issue, perhaps the methodology altogether is flawed.也许是格式问题，也许方法完全有缺陷。 I just don't know enough to be able to diagnose it yet.我只是还没有足够的知识来诊断它。

Hopefully, some of you nice people would be able to point out my flaws or point me in the right direction of how to fix this.希望你们中的一些好人能够指出我的缺陷或指出我如何解决这个问题的正确方向。 I've searched and I couldn't find anyone who was trying to do the things I'm doing all in one build (preparing to myself to be proved wrong here).我已经搜索过，但找不到任何人试图在一个构建中完成我正在做的所有事情（准备让自己在这里被证明是错误的）。

Here's the code:这是代码：

 <?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>

Frustratingly, when I pasted this code in here and ran it, it worked.令人沮丧的是，当我将这段代码粘贴到这里并运行它时，它起作用了。 As soon as I opened the file I copied this from in my browser.我一打开文件，就在浏览器中复制了这个文件。 It stopped working.它停止工作。 I just don't understand it.我只是不明白。

Answer 1

From your code it looks like you want to extract just the domain name from the input field.从您的代码中，您似乎只想从输入字段中提取域名。

You mix JavaScript DOM calls and jQuery, which is fine.你混合 JavaScript DOM 调用和 jQuery，这很好。 It is usually easier to interact with the DOM using just jQuery.仅使用 jQuery 通常更容易与 DOM 交互。 Here is your code rewritten in jQuery:这是用 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>

Explanation:解释：

.on('input') - fires every time something changes in the input field- val.replace(cleanRegex, '$1') - clean up: strip protocol and www prefix, and URL path (any text after domain .on('input') - 每次输入字段发生变化时触发 - val.replace(cleanRegex, '$1') - 清理：去除协议和www前缀，以及 URL 路径（域后的任何文本
cleaned.match(validRegex) - check validity of domain cleaned.match(validRegex) - 检查域的有效性
.prop('disabled', true/false) - add/remove disable property .prop('disabled', true/false) - 添加/删除禁用属性

为什么我的Javascript Function在一段时间后停止工作？

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-12-17 23:51:27

为什么我的Javascript Function在一段时间后停止工作？

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-12-17 23:51:27

解决方案1
0 已采纳 2020-12-17 23:51:27