Javascript onClick 定时事件？

Question

我有一个问题! 是否可以对点击事件进行定时？ 我正在使用 RPi 和 python 编写电机控制程序。我需要按钮来控制电机速度。目前，按钮仅在按下时设置固定速度，在释放时设置 0 速度。是否可以这样做，按下按钮后执行一个功能，按住 1 秒后执行另一个功能，再过 1 秒甚至执行另一个功能？

这是我目前的整个页面代码(忽略注释)

<!-- import jquery for later use, google offers hosted version .. this is how you make comments in HTML btw =) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script type="text/javascript">

    // declaring global variables:
    _running = false;
    _loader = document.createElement('div');
    _urlForward = "/pirmyn";
    _urlStop        = "/stoti";
    _urlLeft        = "/kaire";
    _urlRight       = "/desine";
    _urlBack        = "/atgal";
    _urlFoto        = "/foto";      
    // local variables, that would only be available in this <script> tag and not outside would have var ... infront
    // ->
    //      _running = false; <- global, accessible from any <script> tag at any time
    //      var _running = false; <- local, same name as global var, will cause funny random effect since javascript is stupid :P
    //      var running = false; <- local, only accessible inside this <script> tag or functions defined inside this tag


    // function to send a movement signal, will send the signal and also set _running to true so we know the motors are moving and we should send stop next time its called
    function sendMoveSignal(signal) {

        $(_loader).load(signal);
        _running = true;
    }

    // sends a function signal, motors wont be moving so we dont set _running to true
    function sendSignal(signal) {

        $(_loader).load(signal);
    }

    // takes the variable bId (button Id), grabs the element with that ID from HTML and sets its background colour to the active one
    function activateButton(bId) {

        var b = document.getElementById(bId);
        b.style.backgroundColor = "green";
    }

    // if motors are doing something (_running == true) we send stop and set _running to false so we know motors have stopped
    function sendStop() {

        if(_running)
        {
            $(_loader).load(_urlStop);
            _running = false;
        }               
    };

    // send forward signal to server and activate the forward button
    function onForward() {

        sendMoveSignal(_urlForward);                
        activateButton('bForward');
    };

    // send left signal to server and activate the left button
    function onLeft() {

        sendMoveSignal(_urlLeft);               
        activateButton('bLeft');
    };

    // .. as the ones above ;)
    function onRight() {

        sendMoveSignal(_urlRight);              
        activateButton('bRight');
    };

    function onBack() {

        sendMoveSignal(_urlBack);               
        activateButton('bBack');
    };

    function onFoto() {

        sendSignal(_urlFoto);
        activateButton('bFoto');
    };

    // call sendStop, it will only do something if motors are running (_running == true), after that deactivate all buttons
    function onStop() {

        sendStop();             
        deactivateAllButtons();
    };

    // graps each button object from HTML and sets the colour attribute to the inactive colour, could also set css class instead
    function deactivateAllButtons() {

        var startButton = document.getElementById('bForward');
        var leftButton  = document.getElementById('bLeft');
        var rightButton = document.getElementById('bRight');
        var backButton  = document.getElementById('bBack');
        var fotoButton  = document.getElementById('bFoto');

        startButton.style.backgroundColor = "red";
        leftButton.style.backgroundColor = "red";
        rightButton.style.backgroundColor = "red";
        backButton.style.backgroundColor = "red";
        fotoButton.style.backgroundColor = "red";
    }

    // this will be called from the browser once it has all files loaded completely, best entry point for any script since we can be sure that everything is loaded and ready here
    window.onload = function() {

        // call this to set all buttons to inactive by default when the page is loaded
        deactivateAllButtons();
    }
</script>

<!-- just thought it would be good to seperate controls and other functions here -->
<span id="controls" style="display:inline-block; border: 1px solid;">

    <div id="firstRow">
        <!-- onmousedown will fire when ANY mousebutton is clicked so rightclick works too here, if thats a problem it can be changed, just let me know =) -->
        <!-- onmouseup fires for any button too, we send stop there -->
        <!-- onmouseout fires when the mouse leaves the button area, we send stop to be sure .. onmouseup wont be triggered if the mouse is released outside of the context of the button -->
        <div id="bForward" onmousedown="onForward();" onmouseout="onStop();" onmouseup="onStop();" style="cursor:pointer;border:1px solid black;width:80px;margin:15px;margin-left:85px;padding:15px;text-align:center;">
            FORWARD
        </div>
    </div>

    <div id="secondRow">
        <span id="bLeft" onmousedown="onLeft();" onmouseout="onStop();" onmouseup="onStop();" style="display:inline-block;cursor:pointer;border:1px solid black;width:80px;margin:15px;padding:15px;text-align:center;">
            LEFT
        </span>

        <span id="bRight" onmousedown="onRight();" onmouseout="onStop();" onmouseup="onStop();" style="display:inline-block;cursor:pointer;border:1px solid black;width:80px;margin:15px;padding:15px;text-align:center;">
            RIGHT
        </span>
    </div>

    <div id="thirdRow">
        <div id="bBack" onmousedown="onBack();" onmouseout="onStop();" onmouseup="onStop();" style="cursor:pointer;border:1px solid black;width:80px;margin:15px;margin-left:85px;padding:15px;text-align:center;">
            BACK
        </div>
    </div>
</span>

<span id="functions" style="display:inline-block;position:absolute;">

    <!-- here onmouseout and onmouseup call deactivateAllButtons instead of onStop since we just want to make the foto button inactive again and not send any further signal -->
    <div id="bFoto" onmousedown="onFoto();" onmouseout="deactivateAllButtons();" onmouseup="deactivateAllButtons();" style="cursor:pointer;border:1px solid black;width:80px;margin:15px;margin-left:50px;padding:15px;text-align:center;">
        FOTO
    </div>

</span>

Answer 1

您需要做的是从脚本设置处理程序，而不是在 html 中， 并检查时间与 mouseup/mousedown 等。 例如

var sec = 1000;  //1 second in millisecs
var time;  //global for time checks

$(function() {  //set handlers after document loads
  var btn = $('#bBack');  //ex. button

  btn.mousedown(function(){
     immediateFunction(); //execute the 1st function
     time = (new Date()).getTime();
     btn.on('mouseup', foo);
     setTimeout(removeListener, sec); //remove listener after 1 second
  });

  function foo(){
       var timeNow = (new Date()).getTime();
       if(timeNow-time > sec){
         //now i know he released the button in more than 1 second, do X
       }else{
         //now i know he released the button in less than 1 second, do Y
       }
   }

   function removeListener(){
     btn.off('mouseup', foo); //remove listener
   }

   function immediateFunction(){
     console.log('whatever');
   }
});

你也可以用 Promise 来做到这一点，但对于 js 新手来说，根据你使用的 HTML 监听器和全局变量来判断，这会更复杂:)祝你好运