$(window).resize() 时，鼠标释放后再执行

resize绑定的事件不是在鼠标释放后才执行的吗？

var rt;
$(window).resize(function(){
clearTimeout(rt);
rt = setTimeout(function(){
alert("执行代码");
},500);
});

不是啊，我在改变窗口大小时，鼠标不松开，也一直在执行的。你试一下<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
       var i = 0;
        $(window).resize(function ()
        {
                i++;
                $("body").append(i+",");
        });
</script>
</head>
<body></body>
</html>

你要跟我說不行，我跟你急...
是男人，就一定要行.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
/* 兼容ie678 */
html,body{height:100%;overflow:visible;}
</style>
<title>test</title>
<script type="text/javascript">
var idt;
var n = 0;
window.onresize = function() {
clearTimeout(idt);
idt = setTimeout(function() {
n++;
document.getElementById('d').innerHTML += n + ',';
}, 10);
}
</script>
</head>
<body>
<div id="d" style="width:1000px;height:1200px;background:#f6f6f6;"></div>
</body>
</html>

你好，延迟执行，这个我也看到其它的网友说过，但并不是最佳的解决方案，因为你不知道用户什么时候松手，谢谢对于一般情况延迟节流就可以算是比较好的解决方法了（知不知道用户何时松手不重要，重要的是延迟可以保证只在用户松手的时候执行resize绑定的函数）~~~

resize类似定时器，只要窗口不断变化就会不断执行。你想以释放鼠标来判断是不行的。因为改变窗口大小并不一定是拖动鼠标来改变，还有单击、快捷键。

你们都是用什么浏览器看的。
怎么我看的就是只有释放鼠标才有东西出来的。chrome IETester

resize（）不可能会卡到那么难以接受的程度的
楼主你看看是不是resize 联动的渲染重绘太多了
再有无所谓让鼠标释放才重绘给个0.5s的延迟就行

你好，延迟执行，这个我也看到其它的网友说过，但并不是最佳的解决方案，因为你不知道用户什么时候松手，谢谢对于一般情况  延迟节流就可以算是比较好的解决方法了（知不知道用户何时松手不重要，重要的是延迟可以保证只在用户松手的时候执行resize绑定的函数）~~~延迟可以保证只在用户松手的时候执行resize绑定的函数）？
----------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        var i = 0, rt;
        $(window).resize(function ()
        {
                clearTimeout(rt);
                rt = setTimeout(function ()
                {
                        i++;
                        $("body").append(i + ",");
                },500);
        });
</script>
</head>
<body>
</body>
</html>
像上面这个例子，会出现两种情况。
1、如果改动窗口动作太快，如最大化，还原窗口，这样会等到500毫秒后再执行，
2、如果用户改变窗口的过程持续11秒后才松开鼠标，那这里会执行两次的，虽然这种情况不是很常见的。

原本想在$(window).resize时，绑定mouseup事件，但是并不能获取鼠标在dom外的动作，可悲啊！！
如果没有其它的方法，也许只有使用延迟了，谢谢！

调试易

$(window).resize() 时，鼠标释放后再执行

解决方案 »