当尝试使用 mousemove 事件处理程序的去抖版本时,d3.event
is null
。我想使用d3.mouse
此去抖动处理程序中的对象,但是d3.event
返回 null 并抛出错误。我怎样才能访问d3.event
在下面的代码中:
// a simple debounce function
function debounce(func, wait, immediate) {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) {
func.apply(context, args);
}
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) {
func.apply(context, args);
}
};
}
// the function to handle the mouse move
function handleMousemove ( context ) {
var mouse = d3.mouse( context );
console.log( mouse );
}
// create a debounced version
var debouncedHandleMousemove = debounce(handleMousemove, 250);
// set up the svg elements and call the debounced version on the mousemove event
d3.select('body')
.append('svg')
.append('g')
.append('rect')
.attr('width', 200)
.attr('height', 200)
.on('mousemove', function () {
debouncedHandleMousemove( this );
});
A jsfiddle http://jsfiddle.net/pckkbb9e/2/如果你想看看它的实际效果。尝试将鼠标移到rect
元素。
发生这种情况是因为 D3 在事件完成后删除了事件变量,因为当 debounce 被调用得太晚并且事件消失时,它会使用超时。
为了解决这个问题,您可以使用 debounce 函数的修改版本来保存当前事件并在调用之前替换它。
function debounceD3Event(func, wait, immediate) {
var timeout;
return function() {
var context = this;
var args = arguments;
var evt = d3.event;
var later = function() {
timeout = null;
if (!immediate) {
var tmpEvent = d3.event;
d3.event = evt;
func.apply(context, args);
d3.event = tmpEvent;
}
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) {
var tmpEvent = d3.event;
d3.event = evt;
func.apply(context, args);
d3.event = tmpEvent;
}
};
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)