在setInterval函数

Question

我正在尝试使用SVG创建一些能够响应鼠标移动并随机移动的内容。

你可以在这里查看代码 https://jsfiddle.net/hass/Lfv2yjyf/

$(document).ready(function(){
    var d = document;
    var mysvg = d.getElementById("mysvg");

    var mx,my,random,xmid,ymid,input;

    setInterval(function() {
        //svg size
        var svgw = $("svg").width();
        var svgh = $("svg").height();

        //center point of svg
        xmid = svgw/2;
        ymid = svgh/2;

        //random numbers
        random = {
            a: Math.floor(Math.random()*25),
            b: Math.floor(Math.random()*25),
            c: Math.floor(Math.random()*25)
        };

        //add event to svg
        mysvg.addEventListener("mousemove", function(e) {
            //aqcuire mouse position relative to svg
            mx = e.clientX;
            my = e.clientY;

            //add <path> to svg
            input = '<path d="M ' + xmid + ',' + ymid + ' l ' + 0 + ',' + 0 + ' ' + ((mx-xmid)/2) + ',' + random.a + ' ' + ((mx-xmid)-((mx-xmid)/2)) + ',' + ((my-ymid)-random.a) + ' ' + '" stroke="orange" stroke-width="7" stroke-linejoin="round" fill="none" />';
        });

        //display datas
        $("#status1").html("X Position : " + mx + "<br>Y Position: " + my + "<br><br>Center Point X: " + xmid + "<br><br>Center Point Y: " + ymid + "<br><br>Width: " + svgw + "<br>Height: " + svgh + "<br><br>Random Value a: " + random.a + "<br>Random Value b: " + random.b + "<br>Random Value c: " + random.c);

        $("#mysvg").html(input);
    }, 10);
});

我的问题是中线的随机移动仅在我移动鼠标时响应，我知道它不起作用，因为随机值只能通过鼠标移动来获取。

我试图做的是即使没有鼠标移动我也想要随机移动。

所以我想知道我是如何每隔10毫秒在setInterval中获取全局对象的值，或者是我设置的任何值＆＃34; setInterval＆＃34;功能，但我几乎每毫秒都喜欢，所以我可以得到随机的振动效果。

我也尝试写过＆＃34;路径＆＃34;在mousemove功能之外，它可以工作，这是我想要实现的目标

https://jsfiddle.net/hass/d2L4hda5/

但问题是当我检查控制台（浏览器的开发工具→控制台选项卡）时，鼠标x和鼠标y的值是＆＃34; NaN＆＃34;。但渲染效果很好。

我无法弄清楚我在这里失踪了什么。

所以我想得到一些建议，如果第二个链接是我想要实现的，并获得正确的鼠标x和鼠标y值或任何其他最佳效果的技术。

问候。

Answer 1

我不完全确定你的问题在这里。您的问题是，您似乎无法在浏览器工具中看到iof mx和my的值吗？你是怎么读他们的？请注意，它们不是全局变量。它们是ready()函数的本地。因此，例如，如果您只是在控制台中键入mx，则无法看到该值。

另请注意，每次调用间隔计时器函数时，都不需要继续添加mousemove事件处理程序。它可以是完全独立的。见下文。

$(document).ready(function(){
    var d = document;
    var mysvg = d.getElementById("mysvg");

    var mx,my,random,xmid,ymid,input;

    //svg size
    var svgw = $("svg").width();
    var svgh = $("svg").height();

    //center point of svg
    xmid = svgw/2;
    ymid = svgh/2;

    //add event to svg
    mysvg.addEventListener("mousemove", function(e) {
        //aqcuire mouse position relative to svg
        mx = e.clientX;
        my = e.clientY;
    });

    setInterval(function() {
        //random numbers
        random = {
            a: Math.floor(Math.random()*25),
            b: Math.floor(Math.random()*25),
            c: Math.floor(Math.random()*25)
        };

        //add <path> to svg
        input = '<path d="M ' + xmid + ',' + ymid + ' l ' + 0 + ',' + 0 + ' ' + ((mx-xmid)/2) + ',' + random.a + ' ' + ((mx-xmid)-((mx-xmid)/2)) + ',' + ((my-ymid)-random.a) + ' ' + '" stroke="orange" stroke-width="7" stroke-linejoin="round" fill="none" />';

        //display datas
        $("#status1").html("X Position : " + mx + "<br>Y Position: " + my + "<br><br>Center Point X: " + xmid + "<br><br>Center Point Y: " + ymid + "<br><br>Width: " + svgw + "<br>Height: " + svgh + "<br><br>Random Value a: " + random.a + "<br>Random Value b: " + random.b + "<br>Random Value c: " + random.c);

        $("#mysvg").html(input);
    }, 10);

});

html, body {
		width: 100%;
		height: 100%;
		padding: 0;
		margin: 0;
	}

body {
    overflow: hidden;
}

#wrapper {
    width: 100%;
    min-height: 100%;
    margin: 0 auto;
    position: relative;
}

svg {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    outline: 1px solid blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
    <p id="status1"></p>
    <svg id="mysvg" width="300" height="300"></svg>
</div>