Question

var zoomPad = document.getElementsByClassName('zoomPad');
zoomPad[0].onmouseover = function(){
    var action = 'image_zoom';
    // Check if the activity is already logged
    var checkCookie = getCookie('image_zoom');
    if(checkCookie != '')
        return false;

    //Log activity of hovering image
    $.ajax({
        type: 'POST',
        url:  '/ajaxCall/user-activity-ajax.php',
        data: {action:action},
        success: function(response)
        {
            document.cookie = "image_zoom  = " + action;
            console.log(response);
        }
    });
} // end zoomPad

您好，我试图在鼠标悬停在图像上时记录用户事件..但它不应该在一个单元页面上多次记录，这就是为什么我实现cookie以停止多次执行ajax。

但是，一旦我加载页面并将鼠标移动到该图像上，有时5次，有时会向ajax发出9次调用。同样的机制我应用于页面中的另一个下拉菜单但是工作正常。

感谢

Answer 1

在这里运作良好：http://jsfiddle.net/7g5LX/

也许你应该尝试这个getCookie函数（来自http://www.w3schools.com/js/js_cookies.asp）：

function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i<ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1);
        if (c.indexOf(name) != -1) return c.substring(name.length,c.length);
    }
    return "";
}

或者在ajax行为之外调用你的cookie设置器（当你的ajax调用返回＆＃39;成功＆＃39;时设置你的cookie）

Answer 2

奥基，

这个问题的一个解决方案是通过使用“one”方法将某些函数绑定到每个元素只运行一次，从而更有效地使用jQuery。这样，您可以确定在必要时它不会重新运行。

/*
Bind trackZoomPadActivity method to a mouseover, but do it using "one",
so it is binded to call mouseover only once
*/
$('.zoomPad').one("mouseover", trackZoomPadActivity);

应该重新运行的时候是你通过ajax请求检测到由于服务器出现一些未知错误而导致跟踪失败。

request.fail(function( jqXHR, textStatus ) {
    // if request fails, we re-bind trackZoomPadActivity method, so
    // person can try to mouseover again
    $that.one("mouseover", trackZoomPadActivity);
});

除了这些要点之外，这里有一个完整的代码，应该可以使用。这个想法是每个元素跟踪事件一次＆amp;只有在服务器请求失败时才重新尝试重做操作：

JavaScript中的完整代码：

/*
Bind trackZoomPadActivity method to a mouseover, but do it using "one",
so it is binded to call mouseover only once
*/
$('.zoomPad').one("mouseover", trackZoomPadActivity);

/**
 * Method for tracking zoomPad activity
 *
 */
function trackZoomPadActivity() {

    // action for this zoomPad
    var action = 'image_zoom',
        // referencing to self
        $that = $(this);

    // check if the activity is already logged
    var checkCookie = readCookie(action);

    // if cookie exists already -- return
    if(checkCookie) {
        return false;
    }

    // log activity of hovering image
    var request = $.ajax({
        type: 'POST',
        url:  '/ajaxCall/user-activity-ajax.php',
        data: { action: action }
    });

    request.done(function(msg) {
        // request is processed successfully, we can save the cookie!
        document.cookie = 'image_zoom = ' + action;
    });

    request.fail(function( jqXHR, textStatus ) {
        // if request fails, we re-bind trackZoomPadActivity method, so
        // person can try to mouseover again
        $that.one("mouseover", trackZoomPadActivity);
    });

}

/**
 * Method for reading cookie value
 *
 */
function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}

用于测试的HTML元素示例：

<img src="http://placehold.it/64/64" class="zoomPad" />
<img src="http://placehold.it/64/64" class="zoomPad" />

干杯。

onmouseover onmousemove执行了这么多次

2 个答案: