中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

關于jquery hashChange反復添加hash之后造成多次觸發事件的bug

發布時間:2020-06-08 15:13:30 來源:網絡 閱讀:1601 作者:chen2009277025 欄目:web開發

        jquery hashChange是一個監聽瀏覽器hash的改變,根據hash的改變進行對應的觸發對應事件的插件。

       讀了事件加載的源碼才理解了其中的緣故,這之間踩過一些坑,寫下來希望能幫到之后用它的人。


        hashchange的主要的原理是監聽瀏覽器的hashchange事件然后將事件進行分發,利用ajax處理事物的一種機制。

        最近項目用到了這個插件,我們的項目用到了jqeury的ajax update進行異步的加載頁面并把頁面的內同append到對應的區域中去,起先我以為是ajaxUpdate加載頁面時把頁面的js反復的加載導致我的頁面出現觸發兩次或者更多次事件,所以再進行該頁面的下一步操作的時候會發現所有的方法都對應到了一個dom層,如果是提交表單會同時提交好多次。并且此時后臺返回的數據也會出現異常。

關于hashchange添加hash參數的時候,原來的代碼是這么寫的:


$.fn.hashchange = function(options) {
    // options array passed
    if (Object.prototype.toString.call(options) === "[object Array]") {
      for (var i = options.length - 1; i >= 0; i--) {
        methods.init.apply(this, [options[i]]);
      }
      return this;
    }
    // single option passed
    return methods.init.apply(this, arguments);
  };
查看源碼才知道原來它在添加hash參數的時候并不會進行排重,所以加了很多的hash參數,然后就會導致觸發一個事件的時候,觸發很多次方法

$.fn.hashchange = function (options) {
    //by chenjianhui
    var self = this;
    var _options = window._options;
    // options array passed
    if (Object.prototype.toString.call(options) === "[object Array]") {
        //for (var i = options.length - 1; i >= 0; i--) {
        //    methods.init.apply(this, [options[i]]);
        //}
        //如果已有的option為空
        if (_options == undefined) {
            window._options = new Array();
            for (var i = options.length - 1; i >= 0; i--) {
                window._options.push(options[i]);
                methods.init.apply(this, [options[i]]);
            }
        } else {
            for (var i = options.length - 1; i >= 0; i--) {
                var isHas = false;
                for (var j in _options) {
                    if (_options[j].hash == options[i].hash) {
                        isHas = true;
                    }
                }
                if(!isHas){
                    window._options.push(options[i]);
                    methods.init.apply(this, [options[i]]);
                }
            }
        }
        return this;
    }

        通過以上的代碼我將傳進來的option臨時放到了windows對象里面,因為這些值應該屬于一個全局使用的一個值。


        至此之后添加進來的hash就不會再有重復的hash值,這樣就不會造成反復添加hash然后一個hash產生多次觸發事件的情況了。

        這個代碼應該還有優化的空間比如在判斷是否存在的問題上可以使用jquery的isInArray方法可能更加直觀。如果更好的改進方案請聯系,大家一起前進。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

米泉市| 株洲县| 沁源县| 昔阳县| 集安市| 曲周县| 玉树县| 三台县| 绥宁县| 疏勒县| 涪陵区| 浑源县| 贵定县| 三都| 郴州市| 颍上县| 府谷县| 临邑县| 临颍县| 砚山县| 永吉县| 西丰县| 新密市| 安乡县| 普定县| 昭平县| 广丰县| 安福县| 上杭县| 深水埗区| 分宜县| 鄂托克前旗| 江孜县| 綦江县| 尚志市| 新巴尔虎左旗| 库伦旗| 温泉县| 竹溪县| 城固县| 安吉县|