iT邦幫忙

0

jquery計時器當停止觸發時執行事件

如提 我想設個計時器
當某個事件被觸發時就開始計時 直到停止觸發時執行某事件
觸發的事件:

song_html+='<td><a href="javascript:void(0)" onclick="request(\''+charA+'\',\''+charB+'\','+song_json[s].list_id+","+song_json[s].song_id+');return false;" title=>'+song_json[s].title+"</a></td>";

計時器

var x=0;
setInterval(function Clean()
{
	if($("#message").text()!=(""))
	{
		x=x+1
	}
	if(x==3)
	{
		$("#message").html("");
		x=0;
	}
}
,1000)

而我想在事件停止觸發(停止點擊)時開始計數x 當x到達3時就清除

我的想法是設個y當點擊時這個y就為0 停止點擊時就為1接著在觸發清除
可是我不知道要用啥函數判斷這個"停止點擊"

2 個回答

0
Homura
iT邦高手 1 級 ‧ 2018-08-23 21:14:04
最佳解答

使用lodash函式庫的_.debounce()做延遲

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
</head>

<body>

    <table>
        <thead>
            <tr>
                <td>歌名</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="uta">1111</td>
            </tr>
            <tr>
                <td class="uta">2222</td>
            </tr>
        </tbody>
    </table>
    <div id="Msg"></div>

    <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.10/lodash.min.js"></script>
    <script>
        var msg;

        function utaClick(dom) {
            msg = dom.text() + '點歌成功';
            $('#Msg').text(msg);
            waitClick();
        }

        var clearMsg = function () {
            $('#Msg').text('');
        }

        var waitClick = _.debounce(clearMsg, 3000);
        $('.uta').click(function () {
            utaClick($(this));
        });

    </script>

</body>

</html>
看更多先前的回應...收起先前的回應...

剛測了一下沒功能......

Homura iT邦高手 1 級 ‧ 2018-08-23 21:30:29 檢舉

jason311101
你有把你的button設定id嗎?

Homura iT邦高手 1 級 ‧ 2018-08-23 21:40:21 檢舉

jason311101
發現你寫的怪怪的
上面更新了

剛忘了說了需要click的是這個

song_html+='<td><a href="javascript:void(0)" id=request onclick="request(\''+charA+'\',\''+charB+'\','+song_json[s].list_id+","+song_json[s].song_id+');return false;" title=>'+song_json[s].title+"</a></td>";

剛試了一下功能快出來了 差一點了
可以的話我希望在點擊時x一直保持為0 停止點擊時才開始計數

Homura iT邦高手 1 級 ‧ 2018-08-23 22:26:05 檢舉

jason311101
你給這樣我看不出你漏了什麼啊.../images/emoticon/emoticon06.gif

Homura我還是把完整的程式碼貼給你吧

Homura已補上了 請查閱

Homura iT邦高手 1 級 ‧ 2018-08-23 23:32:22 檢舉

jason311101
你的return false是幹嘛的?
去掉會動嗎?

可以的話我希望在點擊時x一直保持為0 停止點擊時才開始計數

你這樣不是倒過來了嗎?@@
y=0時把x=0就好了

0

我的想法是設個y當點擊時這個y就為0 停止點擊時就為1接著在觸發清除
可是我不知道要用啥函數判斷這個"停止點擊"

當某個事件被觸發時就開始計時,直到停止觸發時執行某事件:這跟"停止點擊"有啥關係?
你的"停止點擊"的定義是什麼?

你的問題在於說的不清不楚,不在問題本身

<html>
<head>
    <title>link disabled test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="/scripts/lib/jquery.min.js"></script>
    <!-- CSS -->
    <style type="text/css">
        .isDisabled {
            color: currentColor;
            cursor: not-allowed;
            opacity: 0.5;
            text-decoration: none;
        }
        .message{
            display: none;
        }
    </style>
    <!-- Javascript -->
    <script language="javascript">
        $(function () {
            var msgObj = $(".message");
            window.request = function(obj, str, tag, a, index){
                if(msgObj.is(":hidden")){
                    var thisObj = $(obj);
                    thisObj.attr('class', 'isDisabled');
                    msgObj.show();
                    var x = 0;
                    var stopInt = setInterval(function (){
                        x += 1;
                        if(x > 3){
                            thisObj.removeClass('isDisabled');
                            msgObj.hide();
                            clearInterval(stopInt);
                        }
                    }, 1000);
                    return;
                }
                console.log(index);
            };
        });
    </script>
</head>
<body>
<div class="message">start play</div>
<a href="javascript:void(0)" onclick="request(this, '','SI',1,0);return false;" title="">SIDE_A</a>
<a href="javascript:void(0)" onclick="request(this, '','SI',1,1);return false;" title="">SIDE_B</a>
</body>
</html>
看更多先前的回應...收起先前的回應...
Homura iT邦高手 1 級 ‧ 2018-08-24 09:00:19 檢舉

對啊~看不太懂

停止點擊就滑鼠停止click阿這有啥好說明的......

停止點擊就滑鼠停止click阿這有啥好說明的......
點幾下停止,算停止?

點到停為止

不管點了幾下就是一停止就觸發 這樣說的夠清楚了吧

當某個事件被觸發時就開始計時,直到停止觸發時執行某事件
不管點了幾下就是一停止就觸發
看不出這兩句話有什麼奇怪的地方嗎?
觸發時就開始計時,那如果點了兩下,等於有兩次觸發停止,是重新計時,還是累計?
直到停止觸發時執行某事件,什麼情況是停止觸發,點擊時停止觸發?
流程和邏輯不清楚,無法實做是必然的,也沒說清楚執行的情境是什麼?
UI是怎麼操作的? 也沒附上操作的畫面,完全不知道你的用途是什麼?

跟著鄉民看熱鬧測試了一下還是一樣從點擊開始開始計時而不是點擊結束......我還是把環境給你吧這樣你比較好測試

跟著鄉民看熱鬧還是不了解的話可以到這網站測試 http://ac1011.hopto.org:4095/test.html 歌名下那欄隨便找個連結狂點他 然後停下來看是不是停下後3秒才消失

我要發表回答

立即登入回答