在javascript中啟動和結束函數

Question

我正在玩一段簡短的代碼，以查看是否可以在用戶按下鼠標時啟動某個功能，然后在抬起鼠標時結束該功能。 對於這個例子，我試圖增加我在屏幕上顯示的數字，因為用戶在按住按鈕的同時移動鼠標。 我希望它一旦釋放按鈕就凍結並停止，但計數器只是重置並且計數從0繼續，即使沒有按下按鈕...

function dragInit(state, e) {
    var i = 0;
    $(document).on("mousemove", function() {
        if (state) {
            i+=1;
            $('#debug').text(i); //Show the value in a div
        }
    });
}

$(document).ready(function() {

$(document).on(
    {mousedown: function(e) {
        var state = true;
        dragInit(e, state);
    },
    mouseup: function(e) {
        var state = false;
        dragInit(e, state);
    }
    });
});

順便說一句，有沒有辦法在屏幕上顯示變量是真還是假？ 當我嘗試它時只是說[object Object]。

Answer 1

您的代碼中存在很多錯誤。 我建議您在開始使用jQuery之前先閱讀更多基本概念。

傳遞給dragInit()的參數順序在mouseup和mousedown事件綁定上都是錯誤的。

您的計數器重新啟動的原因是因為您的變量i是本地的，因此它僅在聲明它的函數上下文中存在。

你正在使用狀態變量犯同樣的錯誤，但在這種情況下，完全沒必要聲明它。

考慮將您的計數器設為全局（即使這不是一個好習慣）。

我無法通過電話給您提供驗證碼。 解決方案是創建一個mousemove事件，檢查在遞增計數器之前是否按下了鼠標按鈕。

希望我能幫上忙

Answer 2

你可以這樣做：

function dragInit() {
    $(document).on("mousemove", function () {
        if (eventState.state) {
            eventState.count += 1;
            $('#debug').text(eventState.count); //Show the value in a div
        }
    });
}

// Create an object to track event variables
var eventState = {
    count:0, //replaces your previous 'i' variable
    state: false //keeps track of mouseup or mousedown
};

$(document).ready(function () {

    $(document).on({
        mousedown: function (e) {
            eventState.state = true;
            dragInit(); //don't need to pass anything anymore
        },
        mouseup: function (e) {
            eventState.state = false;
            dragInit(); //don't need to pass anything anymore
        }
    });
});

的jsfiddle

或者將所有內容保持為一個對象

var dragInit = function () {
    var count = 0;
    var state = false;
    var action = function () {
        $(document).on("mousemove", function () {
            if (state) {
                count += 1;
                $('#debug').text(count); //Show the value in a div
            }
        })
    };

    $(document).on({
        mousedown: function (e) {
            state = true;
            action(); //don't need to pass anything anymore
        },
        mouseup: function (e) {
            state = false;
            action(); //don't need to pass anything anymore
        }
    });
}

$(document).ready(function () {
    var obj = new dragInit();
});

jsFiddle 2

回應評論的例子

jsFiddle ：這顯示了以下代碼片段在執行方面有所不同的原因。

// Works
$(document).on("mousemove", function () {
    if (state) {

    }
})

// Doesn't
if (state) {
    $(document).on("mousemove", function () {

    });
}

Answer 3

更少的代碼，您只需要這個。

使用jquery on和Off來打開和關閉mousemove事件。

Counter Reset http://jsfiddle.net/kRtEk/

$(document).ready(function () {
    var i = 0;
    $(document).on({
        mousedown: function (e) {

            $(document).on("mousemove", function () {

                $('#debug').text(i++); //Show the value in a div
            });

        },
        mouseup: function (e) {
            i = 0;
            $('#debug').text(i);
            $(document).off("mousemove");
        }
    });
});

W / O重置http://jsfiddle.net/gumwj/

$(document).ready(function () {
    var i = 0;
    $(document).on({
        mousedown: function (e) {
             $(document).on("mousemove", function () {
                 $('#debug').text(i++); //Show the value in a div
            });

        },
        mouseup: function (e) {
            $(document).off("mousemove");
        }
    });
});

WithNoCounter http://jsfiddle.net/F3ESx/

$(document).ready(function () {

    $(document).on({
        mousedown: function (e) {
             $(document).on("mousemove", function () {
              $('#debug').data('idx',parseInt($('#debug').data('idx')|0)+1).text($('#debug').data('idx')); //Show the value in a div
            });

        },
        mouseup: function (e) {
            $(document).off("mousemove");
        }
    });
});

Answer 4

假設你與Jquery結婚（沒有錯） - 請查看並考慮完全重新思考你的方法，利用“.one（）”（ http://api.jquery.com/one/ ）方法。

編輯：如果這種口味不好，請熟悉“ deferred”對象（ http://api.jquery.com/category/deferred-object/ ）

通過jquery處理此問題的方法多種多樣-您最終決定的內容取決於您實際上打算如何處理。