使用JQuery $（...）.val。val（""）清除包含5个或更多字段的表单时IE11崩溃 [英] IE11 is crashing when clearing a form with 5 or more fields using JQuery $(...).val("")

问题描述

如果我使用$（'form input'）.value（）清除IE11中5个或更多字段的表单，则IE11将崩溃。
HTML：

 < form> 
< label> 1< / label>< input type =text/> 
< label> 2< / label>< input type =text/> 
< label> 3< / label>< input type =text/> 
< label> 4< / label>< input type =text/> 
< label> 5< / label>< input type =text/> 
< / form> 
  

JS：

 < $ c $> $（document）.ready（function（）{
 $（'＃clearFormNormal'）。click（function（）{
 $（form input）。val（ ）; 
}）; 
}）; 
  

当我使用setTimeout进行递归时，它可以工作。

JS：

 函数clearFields（counter）{
 var i = counter || 0，deferred = new $ .Deferred（）; 
 if（$（form input）。eq（i）.length === 1）{
 setTimeout（function（）{
 $（form input）。eq i）.val（）; 
i = i + 1; 
 clearFields（i）.always（function（）{
 deferred.resolve（）; 
}）; 
}，0）; 
} else {
 deferred.resolve（）; 
} 
 return deferred.promise（）; 
 
 $ b $（document）.ready（function（）{
 $（'＃clearFormSetTimeout'）。click（function（）{
 clearFields（）; 
}）; 
}）; 
  

请参阅 http://jsfiddle.net/fransoverbeek/Cy5D5/7/ 以及

这是IE11的错误吗？

解决方案

我相信这是一个IE错误，我创建了以下连接错误报告：
https://connect.microsoft.com/IE/feedback / details / 811930 / ie11-crash-when-clearing-multiple-input-fields-with-jquery

我添加了一个稍微修改过的版本递归函数作为解决方法。这个函数稍微更通用一些，看起来像这样：

$ p $ function clearFields（counter，selector）{
var i =计数器|| 0，deferred = new $ .Deferred（）;
if（selector.eq（i）.length === 1）{
setTimeout（function（）{
selector.eq（i）.val（）;
i = i + 1;
clearFields（i，selector）.always（function（）{
deferred.resolve（）;
}）;
}，0）;
} else {
deferred.resolve（）;
}
return deferred.promise（）;

$ b $（document）.ready（function（）{
$（'＃clearFormNormal'）。click（function（）{
$（form （），
clearFields（0，$（form input））。 ）;
}）;
}）;


请对连接问题进行投票表决。

clearFields函数的工作方式： 首先，请注意，我没有写出基于此的原始函数，所以为什么它的工作原理只是我自己的猜想。

clearFields函数是一个递归函数。每次运行时，它都有两个参数：计数器（它是要清除的字段集合中的索引）和选择器（包含要清除的字段集合的jquery对象）

该函数创建查看由选择器指定的DOM元素集中counter指定的元素。如果存在这样的元素，那么它会创建一个异步setTimeout来清除该元素。这个异步函数然后递增计数器（在此称为i）并递归调用clearFields。我相信递归是关键，因为我试图在循环中使用setTimeout，并且它不起作用。

当计数器超过这个函数的最后一个元素是selector.eq（counter）.length！== 1

我认为这个函数可以通过交换counter和order选择器参数，以便计数器对于第一个呼叫是可选的。

我之前从未需要使用jQuery延期代码，所以我不知道在这个函数中扮演的角色是什么。

If I'm clearing a form with 5 or more fields in IE11 using $('form input').val("") IE11 will crash. HTML:

<form>
    <label>1</label><input type="text"/>
    <label>2</label><input type="text"/>
    <label>3</label><input type="text"/>
    <label>4</label><input type="text"/>
    <label>5</label><input type="text"/>
</form>

JS:

$(document).ready(function(){
    $('#clearFormNormal').click(function(){
        $("form input").val("");
    });
});

When I'm doing this recursive and with a setTimeout it works.

JS:

function clearFields (counter) {
    var i = counter || 0, deferred = new $.Deferred();
    if ($("form input").eq(i).length === 1){
        setTimeout(function(){
            $("form input").eq(i).val("");
            i = i + 1;
            clearFields(i).always(function(){
                deferred.resolve();
            });
        },0);
    } else {
        deferred.resolve();
    }
    return deferred.promise();
}

$(document).ready(function(){
    $('#clearFormSetTimeout').click(function(){
        clearFields();
    });
});

See the http://jsfiddle.net/fransoverbeek/Cy5D5/7/ as well

Is this an IE11 bug?

解决方案

I believe that this is an IE bug and I have created the following connect bug report: https://connect.microsoft.com/IE/feedback/details/811930/ie11-crash-when-clearing-multiple-input-fields-with-jquery

I have added a slightly modified version of your recursive function there as a work around. The function is slightly more generic and looks like this:

function clearFields (counter, selector) {
    var i = counter || 0, deferred = new $.Deferred();
    if (selector.eq(i).length === 1){
        setTimeout(function(){
            selector.eq(i).val("");
            i = i + 1;
            clearFields(i, selector).always(function(){
                deferred.resolve();
            });
        },0);
    } else {
        deferred.resolve();
    }
    return deferred.promise();
}

$(document).ready(function(){
    $('#clearFormNormal').click(function(){
        $("form input").val("");
    });
    $('#clearFormSetTimeout').click(function(){
        clearFields(0, $("form input"));
    });
});

Please up-vote the connect issue.

How the clearFields function works:

First, note that I did not write the original function this was based off of, so the why of it working is only conjecture on my part.

The clearFields function is a recursive function. Each time it runs, it takes two parameters: counter (which is the index in the set of fields to be cleared) and selector (the jquery object that contains the set of fields to be cleared)

The function creates looks at the element specified by counter in the set of DOM elements specified by selector. If such an element exists, then it creates an asynchronous setTimeout which will clear that element. This async function then increments counter (which is called i here) and recursively calls clearFields. I believe that the recursiveness is key because I tried using just a setTimeout in a loop and it didn't work.

The recursion stops when counter goes past the index of the last element in the collection which is when selector.eq(counter).length !== 1

I think this function could further be improved by swapping the order of counter and selector parameters so that counter would be optional for the first call.

I have never needed to use the jQuery deferred code before, so I don't know what role that plays in this function.

这篇关于使用JQuery $（...）.val。val（""）清除包含5个或更多字段的表单时IE11崩溃的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！