如何合理节流onmousemove事件?

  //鼠标点击开始
    center[0].onmousedown = function () {
    
        docMove();        //数据释放
        document.onmouseup = function () {            document.onmousemove = null;            document.onmouseup = null;
        };
    };    function docMove() {        document.onmousemove = function (e) {            var e     = e || window.event;            var newX  = e.clientX;            
           //通过newX动态设置元素css来达到改变位置的效果
           
            //阻止冒泡
            e.stopPropagation();
        };
    }

问题:如何通过setTimeout达到函数节流,提升性能?
PS:目前事件执行还有一个小问题,就是在移动元素的过程中会间接性出现鼠标已经释放但onmousemove 并未失效的问题,(实际观感就是鼠标左键已经释放,但是元素还会跟着鼠标移动)


慕莱坞森
浏览 1458回答 3
3回答

繁花不似锦

实现思路就是判断触发事件的时间和上次触发事件的时间间隔超过设定值才触发新的处理函数。建议使用loadsh等类库现成的节流构造函数即可,自己实现当然也行。
打开App,查看更多内容
随时随地看视频慕课网APP