How to reduce onmousemove events reasonably?

    //
    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;
            
           //newXcss
           
            //
            e.stopPropagation();
        };
    }

question: how to achieve function throttling and performance improvement through setTimeout?
PS: currently has a small problem with event execution, that is, the mouse has been released but the onmousemove has not failed indirectly in the process of moving elements. (the actual impression is that the left mouse button has been released, but the element will still move with the mouse)

Function-throttling front-end html javascript

Mar.26,2021

dom.onmousemove=function(){
     if (this.time && Date.now() - this.time < 50) return
     this.time = Date.now()
    // you code
}

if you throttle in the callback of a mobile element, it will result in a mobile card. It is better not to be higher than 16 (1000 shock 60, the general refresh rate of the monitor is 60 frames per second)

come with a simple drag

  let box = document.querySelector('.box')
  document.onmousedown = function (e) {
    let down = false
    if (e.target === box) {
      down = true
      e.target.x = e.offsetX
      e.target.y = e.offsetY
    }
    document.onmousemove = function (e) {
      if (!down) return
      if (this.time && (Date.now() - this.time) < 16) return
      this.time = Date.now()
      box.style.transform = `translate3d(${e.clientX - box.x}px,${e.clientY - box.y}px,0)`
    }
    document.onmouseup = clear
  }

  function clear() {
    document.onmouseup = document.onmousemove = null
  }

function throttling:

var t = null
document.addEventListener('mousemove', () => {
    if (t === null) {
        t = setTimeout(() => {
            console.log('')
            t = null
        }, 16)
    }
}, false)

Why is the 16ms interval? please refer to https://www.cnblogs.com/liuha.

the mouse release element is still moving: the switch that can move the element can be turned on when onmousedown is used, and the switch that can be moved is turned off when onmouseup is used. When onmousemove, the status of the switch determines whether to execute the callback of element movement. The switch is a Boolean variable declared by itself.

var flag = false
document.addEventListener('mousedown', () => {
    flag = true
}, false)
document.addEventListener('mousemove', () => {
    if (flag) console.log('')
}, false)
document.addEventListener('mouseup', () => {
    flag = false
}, false)

The idea of

implementation is to judge that the time of the trigger event and the time interval of the last trigger event exceed the set value before the new handler function is triggered.

it is recommended to use the throttling constructor readily available in class libraries such as loadsh, or you can implement it yourself.

you also hear about throttling through setTimeout. So you should understand the principle of cost-cutting? Bind the event, then cancel the event, and bind it again. That is, define an operation, then delete it within the setTimeout, and then set the new start setTimeout, to rebind and end the deletion after the new start, recursively. Let's finish it according to the demand.

Previous: Invalid custom cordova plug-in call

Next: How to evoke the electron application and get the parameters in url through web hyperlinks