Question

我使用以下脚本检查currentshow.php和#current-show（在现有页面上）的内容是否不同。如果它们不同，那么我想将#current-show替换为currentshow.php：

jQuery(document).ready(function() {

var auto_refresh = setInterval(
    function (){
        function getcurrentshow(){
         var result = null;
         jQuery.ajax({
            url: '/currentshow.php',
            type: 'get',
            dataType: 'html',
            async: false,
            success: function(data) {
                result = data;
            } 
         });
         return result;
        }

        gcs = getcurrentshow();
        cs = jQuery('#current-show').html();
        if (gcs != cs){
            jQuery('#current-show').load('/currentshow.php');
        };
    }, 1000);
)};

我做console.log(gcs)和console.log(cs)，两者都在JS控制台中返回完全相同的内容。但是，无论如何，内容每秒都会重新加载。

知道我做错了吗？

Answer 1

你的代码实际上有一些缺点。

您正在进行同步请求，这是一种不好的做法，甚至在主UI线程中已弃用。
你要两次提出请求。
您正在使用setInterval如果网络滞后几秒钟会怎样？
您正在访问DOM以检查数据是否实际更改。

考虑以下小提琴。 http://jsfiddle.net/Pxe2V/

var prev; //store previous data here
function update() {
    $.get('/currentshow.php').done(function(data) {
        if(data !== prev) { //if data was changed perform DOM manip.
            $('#current-show').html(prev = data);    
        }
    }).always(function() { //Launch next request when prev is done.
        setTimeout(update, 1000);    
    });            
}

update();

Answer 2

我认为您应该在success回调中进行比较。确保当前show确实返回了innert HTML而不是"#current-show"元素

 var auto_refresh = setInterval(
    function (){

      var result = null;
      jQuery.ajax({
         url: '/currentshow.php',
         type: 'get',
         dataType: 'html',
         async: false,
         success: function(data) {
             result = data;
             cs = jQuery('#current-show').html();
             if (cs != result) {
               jQuery('#current-show').html(result);
             }
         } 
      });

  }, 1000);

定时AJAX请求，如果内容不同则重新加载

2 个答案: