1. 程式人生 > >一個dom,點選事件觸發兩個事件是同步還是非同步

一個dom,點選事件觸發兩個事件是同步還是非同步

問題產生原因:
使用者充值介面,一個選擇支付方式的dom綁定了一個插入訂單的 ajax。
為了監測使用者點了哪個支付方式,現在要把選擇哪個支付方式記錄下來。

當然可以在這個ajax請求的方法裡面加入一個插入監測資料。但是考慮到插入訂單的時候要與很多支付平臺對接,速度會本來比較慢。萬一出現意外情況導致訂單插入失敗,會比較麻煩。
然後研究了下。一個dom繫結兩個事件,執行順序的問題。

$('#dom').onclick(function1 (){
  $.ajax({
     ...
  });
);

$('#dom').onclick(function2 (){
  $.ajax({
     ...
}); );

看到的別東西:

JS事件繫結的幾種方式

 1. <div id="outestA" onclick="return buttonHandler(this);"></div>  
 2. <div id="outestA" onclick="var id = this.id;alert(id);return false;"></div> 
 3. var dom = document.getElementById("outestA");  
    dom.onclick = function(){alert("1="
+ this.id);}; dom.onclick = function(){alert("2=" + this.id);}; 後面的會覆蓋前面的 4. addEventListener(type, listener, useCapture); // type:事件型別,不含"on",比如"click""mouseover""keydown"; // 而attachEvent的事件名稱,含含"on",比如"onclick""onmouseover""onkeydown"; (IE特有) // listener:事件處理函式 // useCapture是事件冒泡,還是事件捕獲,預設false
,代表事件冒泡型別 ps:翻譯是否使用捕獲 //同一個事件函式,並且事件型別都為冒泡或者事件捕獲型別,那隻能繫結一次,

JS事件冒泡和事件捕獲

userCapture 為false
事件冒泡執行順序:   從內部到外部Document。

userCapture 為true
事件捕獲執行順序 : 從Document向內部執行

Dom事件流:包含userCapture ture 和 false
捕獲階段的處理函式最先執行,其次是目標階段的處理函式,最後是冒泡階段的處理函式。
目標階段的處理函式,先註冊的先執行,後註冊的後執行。

從這裡看,執行肯定是有先後順序的。那如果其中的一個ajax有問題,會不會影響到另一個的執行?

<span class="test">測試Ajax執行順序</span>>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$('.test').click(function(){
    $.ajax({
        url:'http://test.iok.la/sdk/',
         type:'post',

  dataType:"jsonp",
        success:function(res){
            console.log(res);
        },

    });
});
$('.test').click(function(){
    $.ajax({
        url:'http://test.iok.la/sdk2',
         type:'post',
           dataType:"jsonp",
        success:function(res){
            console.log(res);
        },

    });
});

</script>
  • 測試結果,第一個ajax先執行。
  • 第一個不會影響第二個的執行(連結錯誤或者 在後端sleep(20)都不影響)。

是非同步的!其實想一想也是,ajax 本來一個特性就是非同步的。。。。。。。正常來說的話也應該是這樣子的。。。。

小收穫

額…………看了好久,還是沒怎麼懂他們要表達的內容。。。。暫時先放一放~~以後研究

//顯示載入動畫

js 延遲載入,setTimeout

utils.loading();  
//讓JS執行緒等待100毫秒,等待會讓UI渲染程序實現,  
//如果發現setTimeout還要隔較長時間才到期,為了避免時間上的浪費,瀏覽器選擇馬上切換到UI執行緒。   
setTimeout(function(){  
    //長時間的js計算,同步請求等耗時操作  
    for(var i=0;i<100;i++){  
        console.log(11);  
    }  
    //關閉載入動畫  
    utils.closeload();  
},1000);  

相關推薦

一個dom,事件觸發事件同步還是非同步

問題產生原因: 使用者充值介面,一個選擇支付方式的dom綁定了一個插入訂單的 ajax。 為了監測使用者點了哪個支付方式,現在要把選擇哪個支付方式記錄下來。 當然可以在這個ajax請求的方法裡面加入一個插入監測資料。但是考慮到插入訂單的

radio按鈕一下觸發事件

在專案中發現,切換單選按鈕,卻觸發兩次點選事件,程式碼如下: <ul> <li class="m-r-sm pull-left"> <label class="i-checks" ng-change="se

按鈕一下觸發事件

剛剛在專案中發現,切換單選按鈕,卻觸發兩次點選事件;如下圖所示 這裡觸發了兩次事件,然後呼叫了兩次介面: 百度了一下,沒找到答案,然後還是谷歌靠譜,簡單來說,就是因為點選label的時候,事

Android 防止同時按下按鈕觸發事件,連續事件

        不知道大家在寫程式的時候有沒有遇到這種問題,解決的辦法很簡單。 1. 在這兩個按鈕 或其他控制元件 的父控制元件上加上 android:splitMotionEvents="false" 是否允許多點觸控2. 在style中配置<style na

一個按鈕觸發事件可以嗎?

問:我想讓一個按鈕觸發兩個事件,submit1_click 和submit2_click()可以嗎?怎麼設?先執行submit1_click,再接著執行submit2_click。是再OnClick裡設還是submit1_click裡呼叫submit2_click呀?(用c#

android設定軟鍵盤搜尋鍵以及監聽搜尋鍵時發生事件的問題解決

在輸入框中加入android:imeOptions="actionSearch",呼叫軟鍵盤時,回車鍵就會顯示搜尋二字。 我想在點選搜尋時,跳轉到下一個頁面,但是呼叫setOnKeyListener,每次都執行兩次。最後上網看到別人的文章,解決了問題,解決方法是呼叫se

iOS解決按鈕短時間內多次觸發一次事件方法(開始寫部落格)

在上家公司做專案的時候,做了個60秒獲取驗證碼的功能,當時做了個定時器,按鈕觸發定時器,邏輯來講都是沒問題的,但是實際操作的時候,惡意的在短時間內多次點選那個獲取驗證碼按鈕,按鈕的點選事件被呼叫了多次,定時器從而也呼叫多次,本來一秒減一的事件變成了一秒減多,並且減到0

一個按鈕觸發不同事件

btn.setOnClickListener(new OnClickListener() { @Override public void onClick(View view) { b = !b; if (b) { btn.setTex

js 實現間隔相同時間自動觸發按鈕的事件按鈕觸發事件時間間隔一樣,然後迴圈

問題: function clickTuo() { $("#ffimg1").trigger("click"); }; function clickTuo2() {

jQuery新版本沒有了Toggle事件按鈕分別控制隱藏顯示,同事這按鈕也要互斥。

十二月沒來得及整理髮布,一直在草稿箱。現在已經2019年1月了。。。   需求大概是這樣的   //XX點選事件 var flagBar = 0; $("#doNotBaseRate").click(function () { if (flagBar == 0) { $("#De

解決weex事件觸發

該問題是vue的一個bug,解決方案如下: -表示刪除 +表示新增 <head> <meta charset="utf-8"> <title>weex-vue-demo</title> &

DIV 包括另外一個DIV 裡面的DIV不能觸發外面的DIV事件

function stopBubble(e) { <span style="white-space:pre"> </span>//如果提供了事件物件,則這是一個非IE瀏覽器 <span style="white-space:pre"> &

Android 一個按鈕次單擊觸發不同事件並實現View在同一介面切換

MenuText.java] package com.lskl.com; import android.app.Activity; import android.os.Bundle; import android.view.View; import andro

關於js中動態生成的事件觸發次的討論

由於是動態生成的  點選事件運用了jQuery裡面的on()方法,繫結在body上面,結果在程式裡面運行了兩次。參考了部落格 利用on和off方法編寫高效的js程式碼知道了很多在dom物件刪除以後

關於jQuery中動態生成的事件觸發次的討論

get com pan .html 方法 執行 url wall itl 由於是動態生成的 點擊事件運用了jQuery裏面的on()方法,綁定在body上面,結果在程序裏面運行了兩次。參考了博客 利用on和off方法編寫高效的js代碼知道了很多在dom對象刪除以後,其聲明

C# TreeView 連續觸發AfterCheck事件

https://blog.csdn.net/hanjun0612/article/details/65632720   建立一個類 TreeView2 namespace System.Windows.Forms {     public class Tre

Unity模型觸發事件

using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.Scen

實現多次觸發一次事件

$('.sumbit1').click(function () { $('.sumbit1').unbind();//在點選事件裡移除觸發事件 var pad = $('input:radio[name=info]:checked').val(); i

jQuery新版本沒有了Toggle事件按鈕分別控制隱藏顯示,同事這按鈕擊也要互斥。

hide fun 點擊 flag 新版本 nbsp 同事 query 控制 十二月沒來得及整理發布,一直在草稿箱。現在已經2019年1月了。。。 需求大概是這樣的 //XX點擊事件 var flagBar = 0; $("#doNotB

jquery移動端一個按鈕事件

當一個按鈕已經有一個事件,如點選,彈窗顯示,若還要加個事件,可以用touchstart 如: var videoCover = $("#videoCover");//視訊封面 $(".Js_date").on('click touchstart',function(){ //點選視訊