Блог

Главная - Вопросы по программированию - Почему моя функция Javascript перестает работать через определенный промежуток времени?

Почему моя функция Javascript перестает работать через определенный промежуток времени?

#javascript #regex #validation #replace #event-listener

#javascript #регулярное выражение #проверка #заменить #прослушиватель событий

Вопрос:

Во-первых, я новичок в Javascript и регулярных выражениях. За последний месяц я только погружался в работу. Я пытался собрать, чтобы вставить 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>

К сожалению, когда я вставил этот код сюда и запустил его, он сработал. Как только я открыл файл, я скопировал его в своем браузере. Он перестал работать. Я просто этого не понимаю.

Комментарии:

1. Я не тестировал код, но вы пробовали удалить setTimeout?

Ответ №1:

Из вашего кода похоже, что вы хотите извлечь только имя домена из поля ввода.

Вы смешиваете вызовы JavaScript DOM и jQuery, и это нормально. Обычно проще взаимодействовать с DOM, используя только 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>

Объяснение:

  • .on('input') — срабатывает каждый раз, когда что-то меняется в поле ввода — val.replace(cleanRegex, '$1') — очистка: удаление протокола и www префикса, а также пути URL (любой текст после домена
  • cleaned.match(validRegex) — проверьте действительность домена
  • .prop('disabled', true/false) — добавить / удалить свойство отключения