如何让 JavaScript 检测到变量 c 何时发生变化并执行某些操作？
[英]How can I make JavaScript detect when variable c changes and do something?
问题描述
可以说我有一个变量，例如-
var c = document.getElementsByClassName('chat incoming').length;
如何使变量 c 的最新结果与变量c的最后结果进行c ？ 或者我的问题改写了，当变量c发生变化时，我怎样才能使某些事情发生？
请不要代理。
变量c是该特定元素的数量。
编辑：如果您需要此代码，那么就在这里。
javascript/chat.js
const form = document.querySelector(".typing-area"),
incoming_id = form.querySelector(".incoming_id").value,
inputField = form.querySelector(".input-field"),
sendBtn = form.querySelector("button"),
chatBox = document.querySelector(".chat-box");
form.onsubmit = (e)=>{
e.preventDefault();
};
inputField.focus();
inputField.onkeyup = ()=>{
if(inputField.value != ""){
sendBtn.classList.add("active");
}else{
sendBtn.classList.remove("active");
}
};
sendBtn.onclick = ()=>{
let xhr = new XMLHttpRequest();
xhr.open("POST", "php/insert-chat.php", true);
xhr.onload = ()=>{
if(xhr.readyState !== undefined && xhr.readyState === 4){
if(xhr.status === 200){
inputField.value = "";
var audio = new Audio("php/sounds/good_notification.mp3");
audio.play();
scrollToBottom();
}
}
};
let formData = new FormData(form);
xhr.send(formData);
};
chatBox.onmouseenter = ()=>{
chatBox.classList.add("active");
};
chatBox.onmouseleave = ()=>{
chatBox.classList.remove("active");
};
setInterval(() =>{
let xhr = new XMLHttpRequest();
xhr.open("POST", "php/get-chat.php", true);
xhr.onload = ()=>{
if(xhr.readyState === XMLHttpRequest.DONE){
if(xhr.status === 200){
let data = xhr.response;
chatBox.innerHTML = data;
if(!chatBox.classList.contains("active")){
scrollToBottom();
}
}
}
};
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send("incoming_id="+incoming_id);
}, 500);
function scrollToBottom(){
chatBox.scrollTop = chatBox.scrollHeight;
}
function NotifyNewMessage() {
var c = document.getElementsByClassName('chat incoming').length;
alert(c);
}
我想使用数据库来存储这些信息并让 JavaScript 检查数据库中的最新数据是否小于c如果是那么做一些事情，但我不知道怎么做。
编辑：这是聊天。php
<?php
session_start();
include_once "php/config.php";
if(!isset($_SESSION['unique_id'])){
header("location: login.php");
}
?>
<?php include_once "header.php"; ?>
<body>
<div class="wrapper">
<section class="chat-area">
<header>
<?php
$user_id = mysqli_real_escape_string($conn, $_GET['user_id']);
$sql = mysqli_query($conn, "SELECT * FROM `users` WHERE `unique_id` = {$user_id}");
if(mysqli_num_rows($sql) > 0){
$row = mysqli_fetch_assoc($sql);
}else{
header("location: users.php");
}
?>
<a href="users.php" class="back-icon"><i class="fas fa-arrow-left"></i></a>
<img src="php/images/<?php echo $row['img']; ?>" alt="">
<div class="details">
<span><?php echo $row['fname']. " " . $row['lname'] ?></span>
<p><?php echo $row['status']; ?></p>
</div>
</header>
<div class="chat-box">
</div>
<form action="#" class="typing-area">
<input type="text" class="incoming_id" name="incoming_id" value="<?php echo $user_id; ?>" hidden>
<input type="text" name="message" class="input-field" placeholder="Type a message here..." autocomplete="off">
<button><i class="fab fa-telegram-plane"></i></button>
</form>
</section>
</div>
<script src="javascript/chat.js"></script>
</body>
</html>
4 个解决方案
解决方案1
1 2021-04-08 13:49:34
c 只是一个简单的数字。
假设当 class 聊天传入更改的元素数量时需要通知您可以首先在相关容器元素上设置 MutationObserver 然后在调用时查看 c 是否仍然等于document.getElementsByClassName('chat incoming').length
MutationObserver 比仅仅注意到长度是否改变更有帮助，因为它不仅仅是告诉你聊天框的数量可能已经改变，但即使数量相同，你仍然可以看看 -您可能想要，因为可能有添加和删除，即聊天已更改。
解决方案2
0 2021-04-08 13:43:22
目前，变量c的设置方式不会自动更改，即使您使用 class chat-box添加更多节点，因为变量c只存储一个Number 。
如果变量c就是这个var c = document.getElementsByClassName('chat-box'); ，那么根据 DOM 中的chat-box节点，它将始终是最新的。
现在，如果您想在长度更改时收听，这意味着已经添加了更多带有 class chat-box的节点（如果您删除节点也是如此） 。 无论您在哪里更新chat-box DOM 节点，都将获得此信息。
在下面的代码片段中，我有一个按钮，它将带有 class chat-box的div元素添加到正文中，并且此更改也反映在c变量中。 因此，在点击侦听器本身内部，我也可以放置其他逻辑，假设在c更改时运行。
var c = document.getElementsByClassName('chat-box'); var d = c.length; document.querySelector("button").addEventListener("click", (e) => { const div = document.createElement("div"); div.className = "chat-box"; div.innerText = "Hello World"; document.body.appendChild(div); d = c.length; });
<button>Add Chat Box</button> <div class="chat-box">Hello World</div>
解决方案3
0
因此，在 chat.js 中，您应该将其添加到所有内容下方的底部。
function NotifyNewMessage() {
var c = document.getElementsByClassName('chat incoming').length;
var d = document.getElementById("hidden").value;
var audio = new Audio("php/sounds/good_notification.mp3");
if(c != d){
audio.play();
document.getElementById("hidden").value = c;
}
}
你还应该添加这个
NotifyNewMessage();
在这
setInterval(() =>{
NotifyNewMessage();
let xhr = new XMLHttpRequest();
xhr.open("POST", "php/get-chat.php", true);
xhr.onload = ()=>{
if(xhr.readyState === XMLHttpRequest.DONE){
if(xhr.status === 200){
let data = xhr.response;
chatBox.innerHTML = data;
if(!chatBox.classList.contains("active")){
scrollToBottom();
}
}
}
};
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send("incoming_id="+incoming_id);
}, 500);
你应该把它放在聊天中。php
<input id="hidden" type="hidden" value="0">
现在，您要做的唯一事情就是想办法让用户与文档进行交互。
解决方案4
-1 2021-04-08 13:15:25
您可以使用代理，然后在 object 更改时调用 function。 看看https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy
当 html 的 class 名称更改时，如何使用 JavaScript 执行某些操作？
[英]How to do something with JavaScript when html's class name changes?
如何在不更改 javascript 中的全局变量的情况下更改局部变量？
[英]How do I make changes to a local variable without changing the global variable in javascript?
当我将鼠标放在按钮上时，如何检测按钮的颜色是否因为 CSS 或 JavaScript 事件而改变？
[英]How can I detect if the color of a button changes because CSS or JavaScript event when I put mouse on button?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.