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.
