求解：为什么这段代码中输出结果次数呈现二的n次方次（请看代码）

 .box1 {
        position: relative;
        top: 0px;
        left: 0px;
        width: 100px;
        height: 100px;
        background: red;
        transition: all 0.5s ease;
    }

{
```
margin: 0;
padding: 0;
```
}

{
```
width: 100%;
height: 10%;
```
}
{
```
width: 100%;
height: 100%;
```
}
</style>

</head>

<body>

</div>

    var totalFun = null;
    $(document).on("mousemove", totalFun = function () {
        showClientPos(event);
        move();
        bindEvent();
        $(document).off("mousemove");
    });

    function showClientPos(e) {
        var posArr = [];
        posArr["x"] = e.clientX;
        posArr["y"] = e.clientY;
        return posArr;
    }

    function move() {
        var objX = showClientPos(event).x + "px";
        var objY = showClientPos(event).y + "px";
        $(".box1").css("transform", "translate(" + objX + "," + objY + ")");
       console.log(objX);
    }
    function bindEvent() {
        var transEndEventName = whichTransitionEvent();
        $(".box1").bind(transEndEventName, function () {
            $(document).on("mousemove", totalFun)
        });
    }

    function whichTransitionEvent() {

        var t;

        var el = document.createElement('fakeelement');

        var transitions = {

            'transition': 'transitionend',

            'OTransition': 'oTransitionEnd',

            'MozTransition': 'transitionend',

            'WebkitTransition': 'webkitTransitionEnd',

            'MsTransition': 'msTransitionEnd'

        }

        for (t in transitions) {

            if (el.style[t] !== undefined) {

                return transitions[t];

            }

        }

    }
</script>

</body>
</html>

$(document).on("mousemove", totalFun = function () {
    ...
    move();
    bindEvent();
    ...
});

每次mousemove事件都会调用一次move，同时调用一次bindEvent在css变换结束时又绑定了一次mousemove事件。所以每次调用的mousemove都会翻倍。

【热门文章】

求解：为什么这段代码中输出结果次数呈现二的n次方次 （请看代码）

求解：为什么这段代码中输出结果次数呈现二的n次方次（请看代码）