如何每500毫秒跟踪鼠标位置10秒?

时间:2017-11-29 14:43:04

标签: javascript events

我希望在每500毫秒后捕获鼠标指针位置,持续10秒钟。有人可以帮忙吗?!

我尝试使用'mousemove'事件,但无法通过此方法进一步移动。这是代码,希望这对你有所帮助。 mousemove上的removeEventListner无法正常工作。

val currentScrollPosition = 0

recyclerView.addOnScrollListener(object : RecyclerView.OnScrollListener() {
        override fun onScrolled(recyclerView: RecyclerView?, dx: Int, dy: Int) {
            super.onScrolled(recyclerView, dx, dy)

            currentScrollPosition = recyclerView.computeVerticalScrollOffset() + recyclerView.computeVerticalScrollExtent()
        }

        override fun onScrollStateChanged(recyclerView: RecyclerView?, newState: Int) { }
    })

    storyList.addOnLayoutChangeListener { view, left, top, right, bottom, oldLeft, oldTop, oldRight, oldBottom ->
        if (bottom < oldBottom) {
            if (currentScrollPosition >= recyclerView.computeVerticalScrollRange()) {
                recyclerVIew.post {
                    recyclerView.overScrollMode = RecyclerView.OVER_SCROLL_NEVER
                    recyclerView.smoothScrollBy(0, recyclerView.computeVerticalScrollRange() - recyclerView.computeVerticalScrollOffset() + recyclerView.computeVerticalScrollExtent())
                }
            }
        } else {
            recyclerView.overScrollMode = RecyclerView.OVER_SCROLL_ALWAYS
        }
    }
	var loadTime;
	var loadDate;
	var clickTime;
	var mousePositions = [];
	var closeCapture = false;
	var isTimerON = false;
	var timer_div = document.getElementById('timer-section');
	var x , y;
	function mouseUpdate(e) {
		if (isTimerON) {
			x = e.pageX;
			y = e.pageY;

		// if the timer is ON and position capturing is OPEN then push
		//  the last pointer position to the array
			if (!closeCapture){
				var mouseUpdate = setInterval(function () {
					mousePositions.push({
						pos_x : x,
						pos_y : y
					});
					
				}, 500);
			}
		}
		else{
			document.removeEventListener('mousemove', mouseUpdate);
		}
	}

	function setTimer (time) {

		var x = time;
		document.addEventListener('mousemove', mouseUpdate);

		if (isTimerON) {
			var timer = setInterval(function() {
				if (x >= 0){
					timer_div.innerHTML = x;
					console.log(x);

					x--;
				} 
				else {
					//console.log(mousePositions);
					isTimerON = false;
					closeCapture = true;
					clearInterval(timer);
					console.log("timer off capture closed");
					
				}
			
			},1000);
		}
	}

	function makeTime(x) {
		return  x.getHours() + " : " + x.getMinutes() + " : " + x.getSeconds();
	}

	function tii() {
		isTimerON = true;
		setTimer(10);
		document.removeEventListener('click', tii);
	}

	document.addEventListener('DOMContentLoaded', function () {
		loadCDate = new Date();
		loadTime = makeTime(loadCDate); 
		console.log(loadTime);  
		document.addEventListener('click', tii);
	});

2 个答案:

答案 0 :(得分:3)

我建议在你的时间限制内捕获mousemove事件(在这个例子中,我将limit设置为10秒)。 throttle变量确保您每隔几毫秒才捕获一次(在此示例中为500毫秒)。

您可以使用mousemove事件的x / y坐标来获取鼠标的当前位置。

var limit = 10000;
var throttle = 500;
var start = (new Date).getTime();
var last = (new Date).getTime();

document.addEventListener('mousemove', mouseUpdate);

function mouseUpdate(event) {
  var now = (new Date).getTime();
  if (now - start > limit) {
    return document.removeEventListener('mousemove', mouseUpdate);
  }

  if (now - last < throttle) {
    return;
  }

  last = now;

  // do whatever you want to do within your time limit here
}

答案 1 :(得分:1)

我认为你需要这个http://devdocs.io/lodash~4/index#throttle。油门功能将使您在设置频率中捕获事件。如果您的代码是处理鼠标事件的每个回调。你的程序会被冻结。