jQuery/javascript：webkit clearTimeout 问题

Question

在我上一个问题的后面，我在 webkit 浏览器 Safari 和 Chrome 中的以下代码遇到了一些问题：-

// Textarea focus out event.
var renderHandler;


$("textarea").live('focusout', function (e) {
   var currentNote = this;
   renderHandler = setTimeout( function(){ renderNote(currentNote); }, 100);
});

// handle exceptions
$('.textEdit').live('focusin', function (e) {
   clearTimeout(renderHandler);

});



function renderNote( note ){
var itemContent = $(note).val();
    itemContent = htmlStrip(itemContent);
    itemContent = itemContent.replace(/\n/g, "<br/>"); // New lines
    //itemContent = itemContent.replace(/\s/g, " &nbsp;"); // Spaces

// Formatting replacements
itemContent = itemContent
    .replace(/\[b\]/gi, "<b>")
    .replace(/\[\/b\]/gi, "</b>")
    .replace(/\[i\]/gi, "<i>")
    .replace(/\[\/i\]/gi, "</i>")
    .replace(/\[s\]/gi, "<s>")
    .replace(/\[\/s\]/gi, "</s>");

$(note).replaceWith("<p class='notes'>"+ itemContent +"</p>");
}

在 firefox 中，renderHandler 上的最新 clearTimeout 阻止了函数“renderNote”被调用，这允许我处理 focusout 事件的异常。然而，在 webkit 浏览器中，无论如何都会调用 renderNote。

我尝试过 return、return false、preventDefault、stopPropagation、break 但没有任何乐趣。有人遇到过这种情况吗？

这是一个链接：http://www.kryptonite-dove.com/sandbox/animate

如果您双击正文，然后单击注释的正文，您可以看到它的运行情况。

Answer 1

注意，$.live() 已弃用；应该改用$.on() 或$.delegate()。出于某种原因，我无法正确使用其中任何一个，因此我无法建议如何执行此操作，但您应该考虑避免使用$.live()，因为它最终会被删除，并且是一个性能问题.

据我所知，这行：

$('.textEdit').live('focusin', function (e) {

从不在 Chrome 中运行。没关系，因为它看起来像

$('.textEdit').live('click', function (e) {

应该可以正常工作。

我会修改您的方法并使用块变量，而不是取消超时。例如：

var renderHandler,
    blockRender = false;

$("textarea").live('focusout', function (e) {
    var currentNote = this;
    renderHandler = setTimeout(function(){ 
        renderNote(currentNote); 
    }, 100);
});

$('.textEdit').live('click', function (e) {
    blockRender = true;
});

然后在renderNote():

function renderNote( note ){
    var itemContent = $(note).val();

    if (blockRender) {
        blockRender = false;
        return false;
    }

    itemContent = htmlStrip(itemContent);
    itemContent = itemContent.replace(/\n/g, "<br/>");

    itemContent = itemContent
        .replace(/\[b\]/gi, "<b>")
        .replace(/\[\/b\]/gi, "</b>")
        .replace(/\[i\]/gi, "<i>")
        .replace(/\[\/i\]/gi, "</i>")
        .replace(/\[s\]/gi, "<s>")
        .replace(/\[\/s\]/gi, "</s>");

    $(note).replaceWith("<p class='notes'>"+ itemContent +"</p>");
}

http://jsfiddle.net/TsuZn/3/