關于完美運動框架定義的flag應該怎么放位置？
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
? ? <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
? ? <title></title>
? ? <script>
? ? ? ? // ?var json={a:12};json ?格式
? ? ? ? function startMove(obj, json, fn) {
? ? ? ? ? ? clearInterval(obj.timer);//獲取樣式的方法（項目，屬性，目標值）
? ? ? ? ? ? obj.timer = setInterval(function () {
? ? ? ? ? ? ?// var flag = true;//注意這個不能放到for循環里面?。?！
? ? ? ? ? ? ? ? for (var attr in json) {
? ? ? ? ? ? ? ? ? ? var flag = true;
? ? ? ? ? ? ? ? ? ? var icur = 0;//現在屬性的值
? ? ? ? ? ? ? ? ? ?//當屬性為透明度的時候
? ? ? ? ? ? ? ? ? ? if (attr == 'opacity') {
? ? ? ? ? ? ? ? ? ? ? ? var icur = Math.round(parseFloat(getStyle(obj, attr)) * 100); //Math.round 四舍五入的函數方法。
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? else {
? ? ? ? ? ? ? ? ? ? ? ? var icur = parseInt(getStyle(obj, attr));
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? //獲取速度
? ? ? ? ? ? ? ? ? ? var speed = (json[attr] - icur) /10;
? ? ? ? ? ? ? ? ? ? speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
? ? ? ? ? ? ? ? ? ? //是否到達目標值
? ? ? ? ? ? ? ? ? ? if (icur != json[attr]) {
? ? ? ? ? ? ? ? ? ? ? ? flag = false;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? if (attr == 'opacity') {
? ? ? ? ? ? ? ? ? ? ? ? ? ? obj.style.filter = 'alpha(opacity:' + (icur + speed) + ')';
? ? ? ? ? ? ? ? ? ? ? ? ? ? obj.style.opacity = (icur + speed) /100;
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? else {
? ? ? ? ? ? ? ? ? ? ? ? ? ? obj.style[attr] = icur + speed + 'px';//這里要注意??！
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ?if (flag) {
? ? ? ? ? ? ? ? ? ? ? ? clearInterval(obj.timer);
? ? ? ? ? ? ? ? ? ? ? ? if (fn) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? fn();
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }, 10.0);
? ? ? ? }
? ? ? ??
? ? ? ? function getStyle(obj, attr) {
? ? ? ? ? ? if (obj.currentStyle) {
? ? ? ? ? ? ? ? return obj.currentStyle[attr];
? ? ? ? ? ? }
? ? ? ? ? ? else {
? ? ? ? ? ? ? ? return getComputedStyle(obj, false)[attr];
? ? ? ? ? ? }
? ? ? ? }
? ? </script>
? ? <style>
? ? ? ? #div1 {
? ? ? ? ? ? width: 200px;
? ? ? ? ? ? height: 200px;
? ? ? ? ? ? position: relative;
? ? ? ? ? ? background: yellow;
? ? ? ? ? ? opacity: 0.5;
? ? ? ? ? ? filter: alpha(opacity:50);
? ? ? ? }
? ? </style>
? ? <script>
? ? ? ? window.onload = function () {
? ? ? ? ? ? var oDiv = document.getElementById('div1');
? ? ? ? ? ? oDiv.onmouseover = function () {
? ? ? ? ? ? ? ? startMove(oDiv, { width: 400, height: 400,opacity:100});
? ? ? ? ? ? }
? ? ? ? ? ? oDiv.onmouseout = function () {
? ? ? ? ? ? ? ? startMove(oDiv, { width: 200, height: 200,opacity:50 });
? ? ? ? ? ? }
? ? ? ? }
? ? </script>
</head>
<body>
? ? <div id="div1"></div>
</body>
</html>
定義的flag放在for循環里面和放在for循環外面為什么在顯示的屬性上有差異？放在外面可以正常運行，而放在里面的話。width，height的值就會變?。坷碚撋喜皇欠旁诶锩婧屯饷娴男Ч且粯拥膯?？是什么原因而產生的差異？
2016-08-10
經過本人多次測試，確認flag放在計時器內，for in循環前為好，之后將判斷條件if(flag)放在for in外計時器內，完美框架就能實現了，否則都會有一些BUG。
最后按照你這個，我進行了四種嘗試，效果如下：
把flag=true和判斷if(flag)都放在for循環里面：
此時由于計時器內for循環每次開始flag為true，由于屬性值為兩個以上的時候有時不會同時到達目標值，會使得當某一個屬性屬性達到目標值后flag值已經為true，因此提前結束了定時器；
把flag=true放在計時器內for循環外，判斷if(flag)放在for循環內：
效果跟第一個相似，發現屬性值始終有一個不對，目測也是因為提前結束定時器的緣故；
把flag=true放在for循環內，判斷放在計時器外面也只有一個屬性值為正確，另一個有差異。
最后結論：判斷語句放在循環內，當遍歷屬性時，有一個屬性達到目標值后，就接著執行if(flag)的?語句，故定時器都會提前停止；flag=true放在循環內，對于每個屬性都相當于有一個flag，故也會在有一個屬性達到目標flag變為rue時停止。定義在外面才能使得所有的屬性到目標值后flag值才改變。（個人理解）