Làm thế nào để đợi cho đến khi một yếu tố tồn tại?

Tôi đang làm việc trên một Tiện ích mở rộng trong Chrome và tôi tự hỏi: cách tốt nhất để tìm ra khi một yếu tố tồn tại là gì? Sử dụng javascript đơn giản, với một khoảng thời gian kiểm tra cho đến khi một phần tử tồn tại hoặc jQuery có một số cách dễ dàng để làm điều này?

DOMNodeInsertedđang bị phản đối, cùng với các sự kiện đột biến DOM khác, vì các vấn đề về hiệu suất - cách tiếp cận được đề xuất là sử dụng M mutObserver để xem DOM. Nó chỉ được hỗ trợ trong các trình duyệt mới hơn, vì vậy bạn nên quay lại DOMNodeInsertedkhi MutationObserverkhông có sẵn.

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if (!mutation.addedNodes) return

    for (var i = 0; i < mutation.addedNodes.length; i++) {
      // do things to your newly added nodes here
      var node = mutation.addedNodes[i]
    }
  })
})

observer.observe(document.body, {
    childList: true
  , subtree: true
  , attributes: false
  , characterData: false
})

// stop watching using:
observer.disconnect()

Tôi đã gặp vấn đề tương tự, vì vậy tôi đã tiếp tục và viết một plugin cho nó.

$(selector).waitUntilExists(function);

Mã số:

;(function ($, window) {

var intervals = {};
var removeListener = function(selector) {

    if (intervals[selector]) {

        window.clearInterval(intervals[selector]);
        intervals[selector] = null;
    }
};
var found = 'waitUntilExists.found';

/**
 * @function
 * @property {object} jQuery plugin which runs handler function once specified
 *           element is inserted into the DOM
 * @param {function|string} handler 
 *            A function to execute at the time when the element is inserted or 
 *            string "remove" to remove the listener from the given selector
 * @param {bool} shouldRunHandlerOnce 
 *            Optional: if true, handler is unbound after its first invocation
 * @example jQuery(selector).waitUntilExists(function);
 */

$.fn.waitUntilExists = function(handler, shouldRunHandlerOnce, isChild) {

    var selector = this.selector;
    var $this = $(selector);
    var $elements = $this.not(function() { return $(this).data(found); });

    if (handler === 'remove') {

        // Hijack and remove interval immediately if the code requests
        removeListener(selector);
    }
    else {

        // Run the handler on all found elements and mark as found
        $elements.each(handler).data(found, true);

        if (shouldRunHandlerOnce && $this.length) {

            // Element was found, implying the handler already ran for all 
            // matched elements
            removeListener(selector);
        }
        else if (!isChild) {

            // If this is a recurring search or if the target has not yet been 
            // found, create an interval to continue searching for the target
            intervals[selector] = window.setInterval(function () {

                $this.waitUntilExists(handler, shouldRunHandlerOnce, true);
            }, 500);
        }
    }

    return $this;
};

}(jQuery, window));

Đây là một hàm JavaScript cốt lõi để chờ hiển thị một phần tử.

Thông số:

1. selector: Hàm này tìm phần tử $ {selector}

2. time: Hàm này kiểm tra xem phần tử này có tồn tại sau mỗi $ {time} mili giây không.

   function waitForElementToDisplay(selector, time) {
           if(document.querySelector(selector)!=null) {
               alert("The element is displayed, you can put your code instead of this alert.")
               return;
           }
           else {
               setTimeout(function() {
                   waitForElementToDisplay(selector, time);
               }, time);
           }
       }

Ví dụ: cài đặt selector="#div1"và time=5000sẽ tìm kiếm thẻ HTML có id="div1"5000 mili giây.

Bạn có thể nghe DOMNodeInsertedhoặcDOMSubtreeModified các sự kiện kích hoạt bất cứ khi nào một phần tử mới được thêm vào DOM.

Ngoài ra còn có plugin LiveQuery jQuery sẽ phát hiện khi một phần tử mới được tạo:

$("#future_element").livequery(function(){
    //element created
});

Tôi đã sử dụng phương pháp này để chờ một phần tử xuất hiện để tôi có thể thực hiện các chức năng khác sau đó.

Giả sử doTheRestOfTheStuff(parameters)chức năng chỉ nên được gọi sau khi phần tử có ID the_Element_IDxuất hiện hoặc tải xong, chúng ta có thể sử dụng,

var existCondition = setInterval(function() {
 if ($('#the_Element_ID').length) {
    console.log("Exists!");
    clearInterval(existCondition);
    doTheRestOfTheStuff(parameters);
 }
}, 100); // check every 100ms

Bạn có thể làm

$('#yourelement').ready(function() {

});

Xin lưu ý rằng điều này sẽ chỉ hoạt động nếu phần tử có trong DOM khi được yêu cầu từ máy chủ. Nếu phần tử đang được thêm động thông qua JavaScript, nó sẽ không hoạt động và bạn có thể cần xem các câu trả lời khác.

Tôi nghĩ rằng vẫn không có bất kỳ câu trả lời nào ở đây với ví dụ làm việc dễ đọc và dễ đọc. Sử dụng M mutObserver interface để phát hiện các thay đổi DOM, như thế này:

var observer = new MutationObserver(function(mutations) {
    if ($("p").length) {
        console.log("Exist, lets do something");
        observer.disconnect(); 
        //We can disconnect observer once the element exist if we dont want observe more changes in the DOM
    }
});

// Start observing
observer.observe(document.body, { //document.body is node target to observe
    childList: true, //This is a must have for the observer with subtree
    subtree: true //Set to true if changes must also be observed in descendants.
});
            
$(document).ready(function() {
    $("button").on("click", function() {
        $("p").remove();
        setTimeout(function() {
            $("#newContent").append("<p>New element</p>");
        }, 2000);
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button>New content</button>
<div id="newContent"></div>

Lưu ý: Tài liệu Mozilla của Tây Ban NhaMutationObserver sẽ chi tiết hơn nếu bạn muốn biết thêm thông tin.

Đơn giản chỉ cần thêm bộ chọn bạn muốn. Khi yếu tố được tìm thấy, bạn có thể có quyền truy cập vào chức năng gọi lại.

const waitUntilElementExists = (selector, callback) => {
const el = document.querySelector(selector);

if (el){
    return callback(el);
}

setTimeout(() => waitUntilElementExists(selector, callback), 500);
}

waitUntilElementExists('.wait-for-me', (el) => console.log(el));

Đối với cách tiếp cận đơn giản bằng jQuery, tôi thấy điều này hoạt động tốt:

  // Wait for element to exist.
  function elementLoaded(el, cb) {
    if ($(el).length) {
      // Element is now loaded.
      cb($(el));
    } else {
      // Repeat every 500ms.
      setTimeout(function() {
        elementLoaded(el, cb)
      }, 500);
    }
  };

  elementLoaded('.element-selector', function(el) {
    // Element is ready to use.
    el.click(function() {
      alert("You just clicked a dynamically inserted element");
    });
  });

Ở đây chúng tôi chỉ cần kiểm tra cứ sau 500ms để xem phần tử có được tải hay không, khi có, chúng tôi có thể sử dụng nó.

Điều này đặc biệt hữu ích để thêm trình xử lý nhấp chuột vào các yếu tố đã được thêm động vào tài liệu.

Làm thế nào về chèn thư viện ?

ins insertQuery sử dụng các hàm gọi lại Hoạt hình CSS được đính kèm với (các) bộ chọn được chỉ định để chạy một cuộc gọi lại khi một phần tử được tạo. Phương pháp này cho phép các cuộc gọi lại được chạy bất cứ khi nào một phần tử được tạo, không chỉ lần đầu tiên.

Từ github:

Cách không sự kiện để bắt các nút hiển thị. Và nó sử dụng bộ chọn.

Nó không chỉ hỗ trợ trình duyệt rộng hơn, nó có thể tốt hơn DOMMutingObserver cho một số thứ nhất định.

Tại sao?

• Vì các sự kiện DOM làm chậm trình duyệt và chèn vào không
• Bởi vì Trình quan sát đột biến DOM có ít hỗ trợ trình duyệt hơn so với insQueryQuery
• Bởi vì với insertQuery, bạn có thể lọc các thay đổi DOM bằng cách sử dụng các bộ chọn mà không cần chi phí hiệu năng!

Hỗ trợ rộng rãi!

IE10 + và hầu hết mọi thứ khác (bao gồm cả điện thoại di động)

Đây là một chức năng hoạt động như một trình bao bọc mỏng xung quanh MutingObserver. Yêu cầu duy nhất là trình duyệt hỗ trợ MutingObserver; không có sự phụ thuộc vào JQuery. Chạy đoạn mã dưới đây để xem ví dụ hoạt động.

function waitForMutation(parentNode, isMatchFunc, handlerFunc, observeSubtree, disconnectAfterMatch) {
  var defaultIfUndefined = function(val, defaultVal) {
    return (typeof val === "undefined") ? defaultVal : val;
  };

  observeSubtree = defaultIfUndefined(observeSubtree, false);
  disconnectAfterMatch = defaultIfUndefined(disconnectAfterMatch, false);

  var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
      if (mutation.addedNodes) {
        for (var i = 0; i < mutation.addedNodes.length; i++) {
          var node = mutation.addedNodes[i];
          if (isMatchFunc(node)) {
            handlerFunc(node);
            if (disconnectAfterMatch) observer.disconnect();
          };
        }
      }
    });
  });

  observer.observe(parentNode, {
    childList: true,
    attributes: false,
    characterData: false,
    subtree: observeSubtree
  });
}

// Example
waitForMutation(
  // parentNode: Root node to observe. If the mutation you're looking for
  // might not occur directly below parentNode, pass 'true' to the
  // observeSubtree parameter.
  document.getElementById("outerContent"),
  // isMatchFunc: Function to identify a match. If it returns true,
  // handlerFunc will run.
  // MutationObserver only fires once per mutation, not once for every node
  // inside the mutation. If the element we're looking for is a child of
  // the newly-added element, we need to use something like
  // node.querySelector() to find it.
  function(node) {
    return node.querySelector(".foo") !== null;
  },
  // handlerFunc: Handler.
  function(node) {
    var elem = document.createElement("div");
    elem.appendChild(document.createTextNode("Added node (" + node.innerText + ")"));
    document.getElementById("log").appendChild(elem);
  },
  // observeSubtree
  true,
  // disconnectAfterMatch: If this is true the hanlerFunc will only run on
  // the first time that isMatchFunc returns true. If it's false, the handler
  // will continue to fire on matches.
  false);

// Set up UI. Using JQuery here for convenience.

$outerContent = $("#outerContent");
$innerContent = $("#innerContent");

$("#addOuter").on("click", function() {
  var newNode = $("<div><span class='foo'>Outer</span></div>");
  $outerContent.append(newNode);
});
$("#addInner").on("click", function() {
  var newNode = $("<div><span class='foo'>Inner</span></div>");
  $innerContent.append(newNode);
});

.content {
  padding: 1em;
  border: solid 1px black;
  overflow-y: auto;
}
#innerContent {
  height: 100px;
}
#outerContent {
  height: 200px;
}
#log {
  font-family: Courier;
  font-size: 10pt;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Create some mutations</h2>
<div id="main">
  <button id="addOuter">Add outer node</button>
  <button id="addInner">Add inner node</button>
  <div class="content" id="outerContent">
    <div class="content" id="innerContent"></div>
  </div>
</div>
<h2>Log</h2>
<div id="log"></div>

Đây là một giải pháp trả về Promise trong vanilla Javascript (không có cuộc gọi lại lộn xộn). Theo mặc định, nó kiểm tra mỗi 200ms.

function waitFor(selector) {
    return new Promise(function (res, rej) {
        waitForElementToDisplay(selector, 200);
        function waitForElementToDisplay(selector, time) {
            if (document.querySelector(selector) != null) {
                res(document.querySelector(selector));
            }
            else {
                setTimeout(function () {
                    waitForElementToDisplay(selector, time);
                }, time);
            }
        }
    });
}

Đây là một chức năng Javascript thuần túy cho phép bạn chờ đợi mọi thứ. Đặt khoảng thời gian dài hơn để lấy ít tài nguyên CPU hơn.

/**
 * @brief Wait for something to be ready before triggering a timeout
 * @param {callback} isready Function which returns true when the thing we're waiting for has happened
 * @param {callback} success Function to call when the thing is ready
 * @param {callback} error Function to call if we time out before the event becomes ready
 * @param {int} count Number of times to retry the timeout (default 300 or 6s)
 * @param {int} interval Number of milliseconds to wait between attempts (default 20ms)
 */
function waitUntil(isready, success, error, count, interval){
    if (count === undefined) {
        count = 300;
    }
    if (interval === undefined) {
        interval = 20;
    }
    if (isready()) {
        success();
        return;
    }
    // The call back isn't ready. We need to wait for it
    setTimeout(function(){
        if (!count) {
            // We have run out of retries
            if (error !== undefined) {
                error();
            }
        } else {
            // Try again
            waitUntil(isready, success, error, count -1, interval);
        }
    }, interval);
}

Để gọi điều này, ví dụ như trong jQuery, hãy sử dụng một cái gì đó như:

waitUntil(function(){
    return $('#myelement').length > 0;
}, function(){
    alert("myelement now exists");
}, function(){
    alert("I'm bored. I give up.");
});

Một giải pháp trả lại một Promise và cho phép sử dụng thời gian chờ (tương thích IE 11+).

Đối với một yếu tố duy nhất (loại Element):

"use strict";

function waitUntilElementLoaded(selector) {
    var timeout = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;

    var start = performance.now();
    var now = 0;

    return new Promise(function (resolve, reject) {
        var interval = setInterval(function () {
            var element = document.querySelector(selector);

            if (element instanceof Element) {
                clearInterval(interval);

                resolve();
            }

            now = performance.now();

            if (now - start >= timeout) {
                reject("Could not find the element " + selector + " within " + timeout + " ms");
            }
        }, 100);
    });
}

Đối với nhiều phần tử (loại NodeList):

"use strict";

function waitUntilElementsLoaded(selector) {
    var timeout = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;

    var start = performance.now();
    var now = 0;

    return new Promise(function (resolve, reject) {
        var interval = setInterval(function () {
            var elements = document.querySelectorAll(selector);

            if (elements instanceof NodeList) {
                clearInterval(interval);

                resolve(elements);
            }

            now = performance.now();

            if (now - start >= timeout) {
                reject("Could not find elements " + selector + " within " + timeout + " ms");
            }
        }, 100);
    });
}

Ví dụ:

waitUntilElementLoaded('#message', 800).then(function(element) {
    // element found and available

    element.innerHTML = '...';
}).catch(function() {
    // element not found within 800 milliseconds
});

waitUntilElementsLoaded('.message', 10000).then(function(elements) {
    for(const element of elements) {
        // ....
    }
}).catch(function(error) {
    // elements not found withing 10 seconds
});

Hoạt động cho cả danh sách các yếu tố và một yếu tố duy nhất.

Một ví dụ rõ ràng hơn bằng cách sử dụng MutingObserver:

new MutationObserver( mutation => {
    if (!mutation.addedNodes) return
    mutation.addedNodes.forEach( node => {
        // do stuff with node
    })
})

Đây là một giải pháp đơn giản cho những người đã quen với lời hứa và không muốn sử dụng bất kỳ lib hoặc bộ hẹn giờ của bên thứ ba nào.

Tôi đã sử dụng nó trong các dự án của tôi trong một thời gian

function waitForElm(selector) {
    return new Promise(resolve => {
        if (document.querySelector(selector)) {
            return resolve(document.querySelector(selector));
        }

        const observer = new MutationObserver(mutations => {
            if (document.querySelector(selector)) {
                resolve(document.querySelector(selector));
                observer.disconnect();
            }
        });

        observer.observe(document.body, {
            childList: true,
            subtree: true
        });
    });
}

Để dùng nó:

waitForElm('.some-class').then(elm => console.log(elm.textContent));

hoặc với async / đang chờ

const elm = await waitForElm('.some-classs')

Nếu bạn muốn nó ngừng tìm kiếm sau một thời gian (hết thời gian) thì jQuery sau sẽ hoạt động. Nó sẽ hết thời gian sau 10 giây. Tôi cần sử dụng mã này thay vì JS thuần vì tôi cần chọn đầu vào qua tên và gặp khó khăn khi triển khai một số giải pháp khác.

 // Wait for element to exist.

    function imageLoaded(el, cb,time) {

        if ($(el).length) {
            // Element is now loaded.

            cb($(el));

            var imageInput =  $('input[name=product\\[image_location\\]]');
            console.log(imageInput);

        } else if(time < 10000) {
            // Repeat every 500ms.
            setTimeout(function() {
               time = time+500;

                imageLoaded(el, cb, time)
            }, 500);
        }
    };

    var time = 500;

    imageLoaded('input[name=product\\[image_location\\]]', function(el) {

     //do stuff here 

     },time);

Tôi thường sử dụng đoạn mã này cho Trình quản lý thẻ:

<script>
(function exists() {
  if (!document.querySelector('<selector>')) {
    return setTimeout(exists);
  }
  // code when element exists
})();  
</script>

nếu bạn có các thay đổi dom async, chức năng này sẽ kiểm tra (với giới hạn thời gian tính bằng giây) cho các thành phần DOM, nó sẽ không nặng đối với DOM và dựa trên Promise :)

function getElement(selector, i = 5) {
  return new Promise(async (resolve, reject) => {
    if(i <= 0) return reject(`${selector} not found`);
    const elements = document.querySelectorAll(selector);
    if(elements.length) return resolve(elements);
    return setTimeout(async () => await getElement(selector, i-1), 1000);
  })
}

// Now call it with your selector

try {
  element = await getElement('.woohoo');
} catch(e) { // catch the e }

//OR

getElement('.woohoo', 5)
.then(element => { // do somthing with the elements })
.catch(e => { // catch the error });