为了账号安全,请及时绑定邮箱和手机立即绑定

如何合理节流onmousemove事件?

如何合理节流onmousemove事件?

慕莱坞森 2018-07-14 21:06:28
  //鼠标点击开始     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 并未失效的问题,(实际观感就是鼠标左键已经释放,但是元素还会跟着鼠标移动)
查看完整描述

3 回答

?
繁花不似锦

TA贡献1851条经验 获得超4个赞

实现思路就是判断触发事件的时间和上次触发事件的时间间隔超过设定值才触发新的处理函数。

建议使用loadsh等类库现成的节流构造函数即可,自己实现当然也行。


查看完整回答
反对 回复 2018-07-15
  • 3 回答
  • 0 关注
  • 1457 浏览

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信