javascript - jQuery "keyup"检查 'Word Count' 时页面崩溃

Question

我在 DIV 上运行了一个单词计数器，在输入几个单词后，页面崩溃了。浏览器继续工作(滚动)并且 Chrome 控制台中没有显示任何错误。不知道我哪里错了......

这一切都是从我在“keyup”中传递“wordCount(q);”开始的。我只是将它传递到那里，因为它会分离出“NaN”而不是要倒计时的数字。

JS:

wordCount();

$('#group_3_1').click(function(){
    var spliced = 200;
    wordCount(spliced);
}) ;

$('#group_3_2').click(function(){
    var spliced = 600;
    wordCount(spliced);
}) ;

function wordCount(q) {
    var content_text = $('.message1').text(),
        char_count = content_text.length;

        if (char_count != 0) 
          var word_count = q - content_text.replace(/[^\w ]/g, "").split(/\s+/).length;
        $('.word_count').html(word_count + " words remaining...");

        $('.message1').keyup(function() {
          wordCount(q);
        });

        try
        {
            if (new Number( word_count ) < 0) {
                $(".word_count").attr("id","bad");
            }
            else {
                $(".word_count").attr("id","good");
            }
        } catch (error)
        {
            //
        }

  };

HTML:

<input type="checkbox" name="entry.3.group" value="1/6" class="size1" id="group_3_1">
<input type="checkbox" name="entry.3.group" value="1/4" class="size1" id="group_3_2">


<div id="entry.8.single" class="message1" style="height: 400px; overflow-y:scroll; overflow-x:hidden;" contenteditable="true"> </div>
<span class="word_count" id="good"></span>

提前致谢!

Answer 1

这导致无限循环 if (new Number(word_count) < 0) { .

你的代码一团糟。只需学习并从更基本的概念开始，然后重新开始即可。如果您想在评论中向我描述您的项目，我很乐意向您展示一种良好、干净、可读的方法。

更新:
在代码中拥有良好架构的一部分是保持逻辑的不同部分分开。代码的任何部分都不应了解或使用与其不直接相关的任何内容。请注意，在我的单词计数器中，它所做的任何事情都与其单词计数器直接相关。字计数器关心计数发生的情况吗？没有。它只是计数并将结果发送出去(无论您告诉它在哪里，通过回调函数)。这不是唯一的方法，但我只是想让您了解如何更有意义地处理事情。

Live demo here (click).

/* what am I creating? A word counter.
 * How do I want to use it?
 * -Call a function, passing in an element and a callback function
 * -Bind the word counter to that element
 * -When the word count changes, pass the new count to the callback function
 */

window.onload = function() {
  var countDiv = document.getElementById('count');
  wordCounter.bind(countDiv, displayCount);
  //you can pass in whatever function you want. I made one called displayCount, for example
};

var wordCounter = {
  current : 0,
  bind : function(elem, callback) {
    this.ensureEditable(elem);
    this.handleIfChanged(elem, callback);

    var that = this;
    elem.addEventListener('keyup', function(e) {
      that.handleIfChanged(elem, callback);
    });
  },
  handleIfChanged : function(elem, callback) {
    var count = this.countWords(elem);
    if (count !== this.current) {
      this.current = count;
      callback(count);
    }
  },
  countWords : function(elem) {
    var text = elem.textContent;
    var words = text.match(/(\w+\b)/g);
    return (words) ? words.length : 0;
  },
  ensureEditable : function(elem) {
    if (
      elem.getAttribute('contenteditable') !== 'true' && 
      elem.nodeName !== 'TEXTAREA' &&
      elem.nodeName !== 'INPUT'
    ) {
      elem.setAttribute('contenteditable', true); 
    }
  }
};

var display = document.getElementById('display');
function displayCount(count) {
  //this function is called every time the word count changes
  //do whatever you want...the word counter doesn't care.
  display.textContent = 'Word count is: '+count;
}