AJAX 聊天，setInterval 堆栈 id

Question

我正在学校使用 AJAX 进行聊天。如果你点击一个链接（你想与之聊天的人），就会有一个 onclick='load(id)' 里面的 person id。这对一个人来说很好，但是当你点击另一个人时，它就像是 id 的堆栈。所以我发现间隔没有清除，但经过数小时的搜索，我仍然找不到任何对我有帮助的东西！所以我希望你们能帮助我。我是 AJAX 的新手..

前端：

<li><a onclick='load( ID )'> USERNAME </a></li>

AJAX：

function load(id) {
            /*remove old interval?*/
            var interval = setInterval(function() {
                console.log(id);
                //update chatbox
                $(".content-box").load("config.php", {
                    "id" : id
                }, function() {
                    //loading config.php
                });
            }, 1000);
        }

顺便说一句，根据我的老师的说法，我需要一个“处理程序”和/或需要编写更多的 oop。但正如我所写，这对我来说是全新的。

Answer 1

<script type="text/javascript">
function load(id) {
            /*remove old interval?*/
            var interval = setInterval(function() 
            {
                $.ajax({
                url: 'config.php',
                type: 'POST',
                data: {"id":id },
                dataType:"json",
                success: function(result) 
                {
                	var hasclass = $(".content-box").hasClass("chat_"+id);
                	if(hasclass == false)
                	{
                		var create_div = "<div class='chat_"+id+"'></div>";
                		$(".content-box").append(create_div);
                	}
                	$(".chat_"+id).html(result);
                	 
                }
            });

            }, 1000);
        }

</script>

<div class="content-box"></div>

<ul>
<li><a onclick='load(1)'> Ashish </a></li>
<li><a onclick='load(7)'> Akash </a></li>
</ul>
Here pass your id in function load().

Answer 2

我自己找到了解决方案..

我先做了一个小测试站点，所以标记不太一样。但到最后也没关系。 前端：

<button onclick='obj.clear(), obj.setId(1), obj.interval()'>
        click me
    </button>
    <button onclick='obj.clear(), obj.setId(2), obj.interval()'>
        click me
    </button>
    <button onclick='obj.clear(), obj.setId(3), obj.interval()'>
        click me
    </button>

后端：

var obj = {
            id : 0,
            setId : function(id){
                this.id = id;
            },
            interval : function() {
                setInterval(function() {
                    console.log(obj.id);
                    //update chatbox
                    $(".content-box").load("testing.php", {

                    }, function() {
                        //load config.php

                    });
                }, 1000);
            },
            clear : function() {
                clearInterval(obj.id);
            }
        }

感谢那些试图帮助我解决我的问题的人。

Answer 3

事件处理程序是到达这里的方式 - 点击链接就是事件。

您还需要每个特定学生的 ID，因此将它们作为数据放在链接中，然后在事件处理程序中使用它们 - 将间隔 id 放在列表的 :"wrapper" 元素中，以便我们知道它在哪里是并且可以使用它。

为清晰起见修改了标记

<ul id="mylist">
  <li><a class="student" data-studentid="2">USERNAME</a></li>
  <li><a class="student" data-studentid="3">Harvy</a></li>
  <li><a class="student" data-studentid="4">Wally</a></li>
</ul>

处理程序的代码

$('#mylist').on('click', '.student', function(event) {
  // stop the default link (a) action
  event.preventDefault();
  //get prior id
  var priorStudentIntervalID = $('#mylist').data('priorinterval');
  if (priorStudentIntervalID) {
    //intervalID is a unique interval ID you can pass to clearInterval().
    window.clearInterval(priorStudentIntervalID);
  }
  // get the id from the a element that was clicked
  var studentID = $(this).data('studentid');
  var newinterval = setInterval(function() {
    console.log(studentID);
    //update chatbox
    $(".content-box").load("config.php", {
      "id": studentID 
    }, function() {
      //loading config.php
    });
  }, 1000);
  //push in the new interval id
  $('#mylist').data('priorinterval', newinterval);
});

请注意，这里我们绑定到 UL 并使用它来保存先前的区间 id。

基本上，您会在给定学生上每 1000 毫秒刷新一次，直到下一次点击