Question

我正在学校使用AJAX聊天。如果你点击一个链接（你想与之聊天的人），就会有一个onclick ='load（id）'，其中的人员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

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

你还需要每个特定学生的ID，所以把它们放在链接中作为数据，然后在事件处理程序中使用它们 - 将interval 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毫秒刷新一次，直到下一次点击

Answer 3

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

我先做了一个小测试网站，所以标记不是一样的。但最终它并不重要。前端：

<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);
            }
        }

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

AJAX聊天，setInterval堆栈id

3 个答案: